Question

I have some html and jQuery code as follows:

$(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");
});

However once the php has changed the images, this on click event no longer works. The tags are exactly the same, as is the div structure they are contained with in. I have no idea what’s causing this problem. Anyone?

Note that the prevent default doesn’t work either – it jumps to the top of the page.

Answer 1

Since you update elements inside the .imgdiv block, all events bound to the updated elements also disappear. To solve the problem, you may use delegated events approach:

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