.load php 后.click 事件不起作用答案

【问题标题】：.click event not working after .load php.load php 后.click 事件不起作用
【发布时间】：2012-10-21 22:34:23
【问题描述】：

我有一些html和jQuery代码如下：

$(function(){
    $("#button").click(function(e){
    $('.imgdiv').load('images3.php');
    e.preventDefault();
    });
});

<img id="preview">
<div class="imgdiv">
//PHP inserted images
<img id="image1" class="t" src="/images/image1.png">
</div>

$(".imgdiv img").click(function(e) {
e.preventDefault();
$("#preview").attr("src","images/image"+this.id.substr(5,6) + ".png");
});

然而，一旦 php 更改了图像，这个点击事件就不再起作用了。标签完全相同，它们包含的 div 结构也是如此。我不知道是什么导致了这个问题。有人吗？

请注意，阻止默认设置也不起作用 - 它会跳转到页面顶部。

【问题讨论】：

标签： php javascript jquery html css

【解决方案1】：

由于您更新了.imgdiv 块内的元素，所有绑定到更新元素的事件也消失。解决问题可以使用delegated events approach:

$(".imgdiv").on("click", "img", function(e) {
   $("#preview").attr("src","images/image" + this.id.substring(5) + ".png");
   e.preventDefault();
});

【讨论】：

【解决方案2】：

改变元素后，可能会改变点击影响它们的方式，为支持后厄运元素选择

jQuery 1.8 或 1.7

$("body").on("click", ".imgdiv img", function(e){
    e.preventDefault();
    $("#preview").attr("src","images/image"+this.id.substr(5,6) + ".png");
});

http://api.jquery.com/on/

jQuery

$(".imgdiv img").live("click", function(e){
    e.preventDefault();
    $("#preview").attr("src","images/image"+this.id.substr(5,6) + ".png");
});

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

关于dom变更后“.on”功能的讨论：.on() not detecting dom change

希望有帮助

【讨论】：