javascript - jQueryクローンのdjango-selectable Autocompleteドロップダウンが機能しない

Question

タイトルにあるように、ページに django で選択可能なオートコンプリート フォーム フィールドがあり、ページの読み込み後に動的に複製しようとしています。複製部分は機能しますが、オートコンプリート フィールドは機能しません。私はdjango-selectableの内部を知りません.jQueryをまだ学んでいるので、自動選択機能を「修正」する方法を理解するまで迷っています.

私の一般的なアプローチは次のとおりです。div コンテナー内で django テンプレート変数を使用してフォーム ウィジェットをレンダリングし、div コンテナーを複製します。

HTML

<div class="autocomplete" id="autocomplete_{{ form.instance.id}}">{{form.autocomplete_dropdown}}</div>

jQuery

// This works, just the cloned form lacks "autocomplete" functionality.
var autocompleteArray = theDiv.find('.autocomplete');
var acClone = autocompleteArray.clone();
table.find(".column").append(acClone);

SunnySydeUp のコメントに基づいて、次の改訂を行いました。

jQuery

// Clone the div and all its contents
var acClone = autocompleteArray.clone(true, true);
// Get the children of the div
var acCloneChildrenArray = acClone.children();
// iterate through the children array, modify ids where they exist to make them unique
// e.g., unique id contained in idSuffix.
for (var i = 0; i < acCloneChildrenArray.length; i++) {
    // if it has an id, make it unique
    if (acCloneChildrenArray[i].getAttribute('id')) {
        var ident = acCloneChildrenArray[i].getAttribute('id')
        acCloneChildrenArray[i].setAttribute('id', ident+'_'+idSuffix);
    };
};

これでデータとイベントがコピーされましたが、プロトタイプ/マスター ドロップダウンに関連付けられています。つまり、複製されたオブジェクトの 1 つをクリックすると、実際にはマスターのドロップダウンがトリガーされます。問題は、イベント ハンドラーを新しいドロップダウンに動的にアタッチする方法に帰着すると思いますか?

最終的な作業コード (SunnySydeUp のソリューションによると、マイナーなバグがあります。ドロップダウン ボタンが重複していますが、オートコンプリートとドロップダウン機能は機能します)。

jQuery

// Clone the div
// We leave clone deepcopy flags at default==false
var acClone = autocompleteArray.clone();

// Get the children of the div
// You don't need to set unique id's on the children, it's irrelevant.

// Bind the new selectable fields to the event handlers.
window.bindSelectables('body');