Jump to content

Binding click event to dynamic element


chronister
Go to solution Solved by requinix,

Recommended Posts

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

 

 

Link to comment
Share on other sites

  • Solution

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() {
Link to comment
Share on other sites

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();
});
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.