Jquery .on() method not working on dynamically created elements

问题

After looking at other questions and trying many possible solutions, I still have not been able to get the click event to bind properly and would really appreciate any help. I am working on a webpage that interacts with an api, no server, just making ajax calls.

This is my HTML:

    <div class = "img image-1 onTop" style="width:300px;left:0px">
      <div class = "pallette-container">
        <div class = "color-sample">
         <div class = "color-overlay">
           <p>#55423</p>
         </div>
        </div>
      </div>
    </div>

I dynamically create these "img" divs and all the child divs when I get data back from an ajax request.

I need to bind a click event function the the 'div.color-overlay' element.

I have tried many different ways to bind it, and have reached what I think is the most specific way to grab the element with selectors.

Here is the function I wrote:

    $('div.img.onTop.image-1>div.palette-container').on('click', 'div.color-sample>div.color-overlay',function(event){
       var searchValue = $(this).parent().attr('data-color');
       $('#colorvalue').val(searchValue);
    });

Please help me understand what is wrong. I am out of logical things to try. Many Thanks! I am using Jquery 2.1.3.

回答1:

You started on the right track, however in order to make this work you need to bind your event handler to some higher level element, for example body:

$('body').on('click', 'div.color-sample>div.color-overlay',function(event){
   var searchValue = $(this).parent().attr('data-color');
   $('#colorvalue').val(searchValue);
});

The idea here is not to handle event on the element where it happened, but allow it to bubble up, in this case until body element, and then handle it here. These are so called delegated events.

You can read more about delegated events in jQuery documentation, look at section Direct and delegated events

回答2:

dynamically create these "img" divs and all the child divs when I get data back from an ajax request.

Tried attaching click event after $.ajax() completes ?, elements appended to DOM ?

   $.ajax().then(function(html) {
    // do stuff, 
    // create these "img" divs and all the child divs
    // append `'div.color-sample>div.color-overlay'` elements to `DOM`
    $('div.img.onTop.image-1>div.palette-container')
    .on('click', 'div.color-sample>div.color-overlay',function(event){
       var searchValue = $(this).parent().attr('data-color');
       $('#colorvalue').val(searchValue);
    });
   }, function err(jqxhr) {
        console.log(jqxhr.status)
   })