Question

我有一些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结构完全相同。我不知道是什么导致了这个问题。任何人吗？

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

Answer 1

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

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

Answer 2

在更改元素之后，它可能会改变点击影响它们的方式，以便在doom元素选择

之后获得支持

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＆lt; 1.7

$(".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

希望这个帮助

.load php后，.click事件无法正常工作

2 个答案: