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 block 中的元素，所有绑定(bind)到更新元素的事件也消失。要解决此问题，您可以使用 delegated events approach :

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