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

Question

我有这个代码：

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

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

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

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

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

Answer 1

问题

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

您用作.div选择器。选择器.div正在寻找一个元素class="div"而不是 type 的元素div。

---

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

要使用委托，请更改为：

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

这是一个示例，显示了在没有委托的情况下对未来元素的委托与绑定：
小提琴

---

解决方案 2 - 创建时绑定到元素
另一种方法是在创建新元素时添加绑定，如下所示：

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

小提琴

Answer 2

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

您的其他逻辑可以遵循 div 的创建。