jQuery中的DOM更改后点击事件不会触发

问题描述：

我试图在HTML页面中添加& DELETE按钮以删除或添加图像代码。 DELETE按钮将删除按钮之前的第一个图像。 ADD按钮将向HTML页面插入一个新图像，并在图像上插入删除按钮。jQuery中的DOM更改后点击事件不会触发

代码工作正常：单击DELETE按钮时删除图像，单击ADD按钮时插入图像。问题是：单击ADD按钮后插入的删除按钮不起作用。所以如果你点击ADD按钮，然后点击DELETE按钮，图像将不会隐藏;点击事件不会触发。

下面是代码：

<html> 
    <head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function(){ 
      $('.img-post input').after('<button type="button" >Delete</button>'); 

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

      $(".add-img button").click(function() { 
        $('<img src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post'); 
      }); 

     }); 


     </script> 
    </head> 
    <body> 
      <div class="img-post"> 
       <img src="image1.jpg" /><input type="hidden" name="allimages[]" value="image1.jpg" /><br /> 
       <img src="image2.jpg" /><input type="hidden" name="allimages[]" value="image2.jpg" /><br /> 
      </div> 

      <div class="add-img"> 
       <button type="button" >Add image</button> 
      </div> 

    </body> 
</html>

答

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

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

这将确保您的选择匹配的所有按钮它们是在初始DOM负载之后添加也会触发相同的功能。

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

请注意，此功能从jQuery 1.9中删除 – 2015-04-03 15:15:05

答

使用live代替：

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

答

你必须改变你的.click(fn)处理程序.live("click", fn)。您的.click()处理程序只能处理document.ready时页面中的元素。您动态添加的元素不存在，因此他们没有点击处理程序。

.live()，在另一方面，着眼于在*点击，然后对它们进行检查，看看他们是否被点击的匹配对象上，将与动态添加到页面初始化代码运行之后的对象。 .live()只适用于某些事件（发生泡泡的事件），但点击就是其中的一种。

$(document).ready(function(){ 
     $('.img-post input').after('<button type="button" >Delete</button>'); 

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

     $(".add-img button").live("click", function() { 
       $('<img src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post'); 
     }); 

    });

答

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

jQuery中的DOM更改后点击事件不会触发

相关推荐