php - .load php 后.click 事件不起作用

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块内的元素，因此绑定到更新元素的所有事件也会消失。要解决此问题，您可以使用委托事件方法：

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

Answer 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 < 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() 未检测到 dom 更改

希望这有帮助