事件侦听器不处理动态添加的元素

Question

我在使用jQuery按下提交按钮时向我的文档添加了一个h1标签。我想稍后与这个h1标签交互（用鼠标点击），所以我需要为它添加一个事件处理程序。但是，它似乎没有记录点击次数。

我之前看过这个问题，他们都说使用.on（），我有，但仍然没有运气。我没有收到任何错误，所以不知道从哪里开始。

这是一个非常简化版本的jsFiddle。感谢。

$("h1").on("click", function(){
    alert("test");
    $("h1").css("color","red");
})

Answer 1

使用此：

$(document.body).on("click", "h1", function(){
    alert("test");
    $("h1").css("color","red");
})

当您在其上调用on时，jquery集必须包含将包含h1的元素。您可以将document.body替换为您确定h1的任何元素。

旁注：

您确定不希望$(this).css("color","red");代替$("h1").css("color","red");吗？使用$(this)会更改所点击的h1的颜色，而不会改变所有h1的颜色。

Answer 2

试试这个

JS CODE

$(document.body).on("click", "h1", function(){
    alert("test");
    $(this).css("color","red");
});

的 LIVE DEMO 的