jQuery克隆django可選自動完成下拉不起作用

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); 
    }; 
}; 

現在數據和事件被複制，但它們與原型/主下拉列表綁定。也就是說，單擊其中一個克隆的對象實際上會觸發主控的下拉菜單。我想這個問題歸結爲如何動態地將事件處理程序附加到新的下拉列表中？每個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'); 

Answer 1

我沒有用之前django-selectable，但我猜測它使用JavaScript/jQuery來使自動完成的工作。當您撥打clone時，它不會爲下拉列表克隆JavaScript。嘗試做：

var acClone = autocompleteArray.clone(true); 

傳入true將使jQuery也複製該輸入上的數據和事件。

Clone documentation