Code works, but not able to repeat without page refresh - jQuery

Question

Hello,

When I click on a image, in the below div

<img src='uploads/<? echo $dir; ?>/<? echo $file; ?>/<? echo $file1; ?>' width='100px' height='100px' style='margin-left:5px; margin-bottom:5px; border:#fff solid 2px;' id='<? echo $i; ?>' class="ind_img">

using this jquery code

$('.ind_img').bind('click',function(f){

var img_large = f.target.id;
var img_src = $('#'+img_large).attr('src');
var disp = '<div  style="margin:0px;"><img src="'+img_src+'"></div>';
$('#display').html(disp);

});

the image enlarges in the following div replacing the <? include('gallery.php'); ?> with <div style="margin:0px;"><img src="'+img_src+'"></div> (above code)

<div id="display" style="overflow-y:scroll; overflow-x:none height:598px;">
  <? include('b.php'); ?>
</div>

But when I click on <div id=all>All</div> <div style="margin:0px;"><img src="'+img_src+'"></div> is replaced by

<? include('gallery.php'); ?>    

<div id="display" style="overflow-y:scroll; overflow-x:none height:598px;">
  <? include('b.php'); ?>
</div>

This is all fine, but I am not able to repeat this step without refreshing this page, why?

Thanks Jean

Answer 1

I feel like you included too much information in your post, especially all this PHP code that has nothing to do with jQuery. You should clean it if you want people to be able to figure things out.

My guess is that when you replace your image with another, the click event is not bound to the new image. You can either bind it manually as you did it for the other elements, or use the live method for bind the click event for all instances of the ind_img class, present or future.