为动态添加的元素添加监听器答案

【问题标题】：Add a listener to an element that is dynamically added为动态添加的元素添加监听器
【发布时间】：2013-02-26 16:47:53
【问题描述】：

我有一个 javascript/jQuery 页面，我在其中使用 Twitter Bootstrap 的预输入。在 javascript 中有两个不同的地方，我可以在其中添加我想预先输入的元素。在不要求主观答案的情况下，我将输入动态注册为预输入的好方法是什么？每次添加它们时都给他们所有不同的 ID 并注册？ .on() 有什么魔法可以做的吗？

【问题讨论】：

元素是用DOM方法（.createElement等）还是用String和.innerHTML/.html()构造的？

标签： javascript jquery twitter-bootstrap bootstrap-typeahead

【解决方案1】：

您可以使用jQuery 委托来执行此操作。例如：

$("#element-that-will-contain-typeaheads").on("DOMNodeInserted", function () {
    $(this).find(".typeahead").typeahead();
});

【讨论】：

这不起作用，因为它不是监听器。 .typeahead 是一个寄存器，据我了解，不能在 .on() 中。
插入DOM节点时有一个事件，让我编辑我的答案
我应该关心我可能正在“重新注册”.typeahead 吗？
jQuery 插件通常会在注册插件之前检查插件是否已经注册，因此无需担心。我确信 twitter bootstrap typeahead 插件也能做到。
DOMNodeInserted 不是已弃用吗？ developer.mozilla.org/en-US/docs/Web/Guide/Events/…

【解决方案2】：

最简单的方法，适用于typeahead, datepicker etc

首先您需要了解如何添加要应用的输入元素bootstrap typeahead

添加元素尝试实现如下：

 //add this in your add button click handler
 $tinput = $('<input type="text" name="bootstrap" class="typeahead"/>');

 //apply bootstrap typeahead
 $tinput.typeahead();

这样就可以了，我认为在这里分享会帮助其他人:)

【讨论】：