jquery - Twitter typeahead.js 在使用 jQuery clone() 克隆时中断 [fiddle inside]

Question

我一直在将 Twitter typeahead.js（版本 0.9.2）集成到我的一个项目中并取得了巨大成功，但前几天我在使用 jQuery 的clone()方法插入和删除表单控件的页面上遇到了问题。

这是一个显示我的意思的小提琴。尝试在现有元素中输入“o”或“t”，然后使用“+”或“>>”按钮添加新元素。如果您然后单击新创建的预输入，您会看到它打开了它上面的建议菜单，否则根本不像预输入。

---

这是小提琴的一部分，因为SO不会让我只发布一个链接：

围绕 typeahead 的 HTML Dom 结构

<div class="outer">
<div class="inner">
    <form>
        <input name="example" /> <!-- initialized as typeahead -->
        <button type="button" class="addBlock">+</button>
        <!-- other buttons omitted -->
    </form>
</div>
</div>

'+' 按钮的 jQuery 驱动程序代码

$(document).on('click', '.addBlock', function(){
    var clone = $(this).parents('.inner').clone(true, true);
    clone.appendTo($('div.outer'));
});

Answer 1

这是因为您仅在页面准备好时才调用 typeahead 函数。您正在创建的元素在设备就绪时不存在，因此没有分配给它。每次添加新的时，您都必须提前调用 typeahead。