动态创建元素后如何绑定到元素答案

【问题标题】：How to bind to an element after creating it dynamically动态创建元素后如何绑定到元素
【发布时间】：2013-08-18 22:23:23
【问题描述】：

我有这个代码：

$(".div").click(function ()
{
    alert("hi");
});

...但是当我创建新的div:

$("body").append("<div>1</div>");

...然后点击这个div，它不会说“嗨”。

我知道我可以对div 元素执行onclick="callfunction()"，但我想避免使用该方法。

【问题讨论】：

【解决方案1】：

问题

您正试图在尚不存在的元素上创建绑定 - 因此无法绑定。

您使用.div 作为选择器。选择器.div 正在寻找具有class="div" 的元素，而不是div 类型的元素。

解决方案 1 - 委派
通过委托，您可以在上述结构中存在的元素上创建绑定，您将在其中动态添加要侦听的元素。

要使用委托，请改为：

$("body").on("click", "div", function ()
{
    alert("hi");
});

这是一个示例，展示了在没有委托的情况下对未来元素进行委托与绑定：
Fiddle

解决方案 2 - 创建时绑定到元素
另一种方法是在创建新元素时添加绑定，看起来像这样：

$newEle = $("<div>1</div>").click( function() {
    alert("hi");
});
$("body").append($newEle);

【讨论】：

我试过了： $("#table").on("click", "div[x][y]", function () { });但它不起作用，为什么？
我的 div 的参数（我的 div 看起来像这样：
...
但即使我这样做 $("body") .on("click", "div", function () { }); 不起作用。
另外，你在哪里有这个js代码？在$(document).ready()?
它们是属性，为什么它不正确？
它很奇怪，在 jsfiddle 中它可以工作，但在我的项目中它没有：\

【解决方案2】：

使用 appendChild() 方法将 DIV 添加到文档的末尾。见：http://www.w3schools.com/jsref/met_node_appendchild.asp

您的其他逻辑可以跟随 div 的创建。

【讨论】：