在jQuery中更改DOM后，Click事件未触发

我正在尝试在HTML页面中编写ADD＆DELETE按钮来删除或添加页面中的图像代码。 DELETE按钮将删除按钮前的第一个图像。 ADD按钮将新图像插入HTML页面，删除按钮将插入图像。

代码工作正常：单击DELETE按钮时删除图像，单击ADD按钮时插入图像。 问题是：单击ADD按钮后插入的删除按钮不起作用。 因此，如果单击“添加”按钮，然后单击“删除”按钮，图像将不会隐藏; click事件未触发。

这是代码：

    $(document).ready(function(){ $('.img-post input').after('Delete'); $(".img-post button").click(function() { $(this).prev().prev().remove(); $(this).prev().remove(); $(this).remove(); }); $(".add-img button").click(function() { $('Delete
').appendTo('.img-post'); }); });    
 
 
 
 
 Add image 
   

Answer 1

使用live()而不是click()将事件处理程序绑定到按钮的单击事件：

 $(".img-post button").live('click', function() { $(this).prev().prev().remove(); $(this).prev().remove(); $(this).remove(); }); 

这将确保在初始DOM加载后添加的与您的选择器匹配的所有按钮也将触发相同的function。

http://api.jquery.com/live/

Answer 2

使用live代替：

 $(".img-post button").live('click', function() { ... 

Answer 3

您必须将.click(fn)处理程序更改为.live("click", fn) 。 您的.click()处理程序仅适用于document.ready时页面中的元素。 您动态添加的元素不存在，因此它们没有单击处理程序。

另一方面， .live()查看顶层的点击，然后检查它们以查看它们是否被点击在匹配的对象上，并且将使用在初始化代码运行后动态添加到页面的对象。 .live()仅适用于某些事件（冒泡的事件），但click是其中之一。

  $(document).ready(function(){ $('.img-post input').after('Delete'); $(".img-post button").live("click", function() { $(this).prev().prev().remove(); $(this).prev().remove(); $(this).remove(); }); $(".add-img button").live("click", function() { $('Delete
').appendTo('.img-post'); }); }); 

Answer 4

尝试使用jQuery live函数。 这会将click处理程序绑定到与您的选择器匹配的元素，即使它们在您的页面最初加载时在DOM中不存在（在您的示例中就是这种情况）。