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

Question

我有这段代码：

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

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

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

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

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

Answer 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

Answer 2

使用appendChild（）方法将DIV添加到文档的末尾。请参阅：http://www.w3schools.com/jsref/met_node_appendchild.asp

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