Question

我有一个问题，我的页面上有这个脚本：

$('div').html('<span class="test_class">Some text inside span</span>');

$('button').click(function() {      
    $('div').html('<span class="test_class">Now its personal</span>');
});

$('.test_class').click(function() {     
    console.log('test_class CLICKED');          
});

当页面加载并且我点击我的跨度 - 一切都很完美，我在Web控制台中得到一个console.log（），但在我点击按钮并点击我的新跨度后 - 我没有得到控制台。登录（）。你能告诉我为什么吗？我怎样才能让它发挥作用？谢谢。

Answer 1

这是因为事件处理程序绑定到<span>元素，其中包含：

$('.test_class').click(function() {     
    console.log('test_class CLICKED');          
});

然后你删除那个<span>并创建一个新的.html()通过写入/替换元素的现有HTML（当用作setter时）;没有绑定事件处理程序（因为它在文档就绪时不存在于页面上）。

要做你想要的事情，你需要使用委托事件处理：

$(document).on('click', '.test_class', function() {     
    console.log('test_class CLICKED');          
});

但是，您应该使用事件处理时文档就绪中最接近的元素而不是document;可以是父<div>：

$('div').on('click', '.test_class', function() {     
    console.log('test_class CLICKED');          
});

但由于非特定选择器，它将绑定到所有 <div>元素。或者，您可以使用一些遍历来执行相同的操作：

$('.test_class').closest('div').on('click', '.test_class', function () {
    console.log('test_class clicked');
});

但是这变得有点笨拙并且看起来有点荒谬（但它会起作用，因为事件处理仍然委托给<div>祖先然后仍然绑定到<div>）。

参考文献：

closest()。
on()。

Answer 2

我认为原因是以下Javascript仅在您第一次加载页面时执行：

 $('.test_class').click(function() {     
            console.log('test_class CLICKED');          
        });

因此，当页面加载时，它会找到带有test_class样式类的span并附加click事件处理程序。

单击文本时，将替换附加了事件处理程序的旧span。即使新span的样式类为＆＃39; test_class＆＃39;，它也没有连接偶数处理程序。要将事件处理程序附加到此新范围，您必须再次执行上述Javascript。

这里是一个JS Fiddle，它将JS放在一个函数中，并在替换span时调用它：http://jsfiddle.net/zyzbxb7u/

empty（）和append（）jquery，它是如何工作的？

2 个答案: