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

Posted 2023-05-09

【中文标题】动态创建元素后如何绑定到元素

【英文标题】：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);

Fiddle

【讨论】：

我试过了： $("#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 的创建。