javascript - 如何在动态创建元素后绑定(bind)到元素

Question

我有这个代码:

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

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

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

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

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

Answer 1

问题

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

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

---

解决方案 1 - 委派
通过委托(delegate)，您可以在存在于上述结构中的元素上创建一个绑定(bind)，您将在其中动态添加一个您想要监听的元素。

要使用委托(delegate)，更改为:

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

这是一个示例，显示了委托(delegate)与未委托(delegate)绑定(bind)到 future 元素上的对比:
Fiddle

---

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

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

Fiddle