jquery DOM变异

Question

我做了这个：

<span class="a">test 1</span><div></div>

为什么.b不会激活警报？

$( ".a" ).click(function() { 
$('div').html('<span class="b">test 2</span>');
});

$( ".b" ).click(function() {
alert("Hello");
});

我不明白如何检测DOM的突变。

Answer 1

选择器在执行时运行，这意味着在加载页面时已经搜索了.b ，而不是在添加dom之后。

为了演示选择器如何在线运行，如果在追加元素后立即定义代码，则代码可以正常工作：

 $( ".a" ).click(function() { $('div').html('<span class="b">test 2</span>'); $( ".b" ).click(function() { alert("Hello"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="a">test 1</span><div></div> 

但是 ，正确的方法是定义基于父的选择器。 以下是将单击事件设置为过滤.b选择器的target的父项。

 $( ".a" ).click(function() { $('div').html('<span class="b">test 2</span>'); }); $(document.body).on("click", ".b", function () { alert("Hello"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="a">test 1</span><div></div> 

Answer 2

因为.b是在查询完成后创建的。 当你在脚本中调用$(".b") ，找不到任何内容，并且没有附加click事件。 您可以通过将事件附加到文档来解决它，如下所示：

$(document).on("click", ".b", function () {
  alert("hello");
});

Answer 3

您正在使用的click()绑定称为“直接”绑定，它只将处理程序附加到已存在的元素。 它不会受到将来创建的元素的约束。 为此，您必须使用on()创建“委托”绑定。

$('div').on("click", ".b", function () {
  alert("hello");
});