Binding click event to dynamic element

[chronister]

Hi Folks... Hope everyone is doing well today!

 

I have researched this and cannot determine how to do this. Any help here would be appreciated.

 

I have a div area that shows a set of images pulled from a directory. I have a dblClick event working on a label around them for the first load that changes the src of another element to the src of the clicked image (edit in place system for website) and goes away so the page can be saved with the new image.

 

When I upload a new image via ajax and then refresh this area to display the newly uploaded file, my dblClick event no longer works. I remember seeing this has to do with explicitly binding the click event to the dynamically created elements. I cannot find any information on how to bind a dblClick event to my img elements after I refresh the section.

 

Here is the code I am working with. This is all inside a document ready block just to clarify.

 

This is the dblClick event that gets attached to the label

$('.newimageContainer label').on("dblclick",function(e){
   // Get the src of the img below the label that was clicked
   imgSrc = $(this).children("img").attr('src')
   // Set the src of the prior selected page image to the new src
   $('.changing').attr("src", imgSrc);
   // close modal
   modal.close();
});

Here is the code that does the replacing of data. It is the complete callback inside an ajax function.
 

complete: function(){
	// STOP LOADING SPINNER AND DISPLAY MESSAGE
	$('.msgArea').html('<strong>SUCCESS: File Uploaded</strong>');
	// Clear the html inside the image picker
	$('#imagePickerWrapper').html('');
	// reload and load the new set of data into the image picker area
	 $('#imagePickerWrapper').load( "/lib/php/updatePage.php .images" );
}

It is after this .load method gets called that my dblClick stops working. If anyone can help, I would appreciate it very much...

 

 

Here is the HTML block for the image picker area (with the php function call)

<div id="imagePickerWrapper"> <span class="images"><?php echo displayUserImages(); ?> </span></div>

Thanks,

 

nate

 

 

[nogray]

whenever you change the HTML directly, you need to add the even again.

[requinix]

Another way would be the alternate syntax to .on() which lets you attach an event handler to a parent element and have it trigger on the children. If you don't change the parent then the handler stays in place.

$("#imagePickerWrapper").on("dblclick", ".newimageContainer label", function() {

[.josh]

You need to change your binding to be a delegated event. Basically the idea is to attach the event handler to an element that will always exist, e.g. the body:

 

$('body').on("dblclick",".newimageContainer label",function(e){
   // Get the src of the img below the label that was clicked
   imgSrc = $(this).children("img").attr('src')
   // Set the src of the prior selected page image to the new src
   $('.changing').attr("src", imgSrc);
   // close modal
   modal.close();
});

[.josh]

my bad requinix.. for some reason i don't get notification when someone else posts.. I moved the solve to yours