CODEWITHSUNDEEP
jquerycssajaxdom
user3562480
user3562480

Reputation: 61

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.

Upvotes: 0

Views: 697

Answers (3)

Shel Yang
Shel Yang

Reputation: 623

The .on() only for the elements which is existing.

One way to bind event to the dynamic elements is every time you create a element then bind event for only that element.

Another way is to bind event to the parent element

Upvotes: 0

guest271314
guest271314

Reputation: 1

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)
   })

Upvotes: 0

krivtom
krivtom

Reputation: 24916

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

Upvotes: 1

Related Questions