jQuery克隆的django-selectable自动完成下拉菜单不起作用

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 的 cmets，我做了以下修改：

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