jQuery Cloned 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的评论，我做了以下修订：

的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