jQuery onclick not firing on dynamically inserted HTML elements?

Question

My onclick event works. However, when that onclick event is on dynamic HTML, it no longer works. As in: nothing happens.

$(document).ready(function () {
    $("#guestlist .viewguestdetails").click(function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});

I'm then dynamically adding this HTML to a page:

<div id="guestlist">    
    <span class="completeguestdetails" data-id="18">(add your data)</span>  
        <div class="guestdetails" data-id="18" style="display: none;">
            some data
        </div>
</div>

However, when I then click on "(add your data)" nothing happens. When I have the HTML staticly in my page, this toggling of the 'guestdetails' div does work. It seems that there is no event attached to dynamically inserted HTML?

UPDATE:

The new dynamic HTML I'm inserting i a row in an existing table. The other rows already have events attached to the onclick events, like:

$("span.guestattendance").click(function () {
    if ($(this).hasClass('checkbox-on')) {
        $(this).removeClass('checkbox-on').addClass('checkbox-off');
        $("#guestday").removeClass('checkbox-on').addClass('checkbox-off');
    }
    else {
        $(this).removeClass('checkbox-off').addClass('checkbox-on');            
        if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') &&
        $("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) {
            $("#guestday").removeClass('checkbox-off').addClass('checkbox-on');
        }
    }
});

Since a user can insert more than 1 row, I didn't use the id, but rather added a wrapper around the element I'm inserting:

and then in ready() function:

$('.newrow_wrapper').on('click', 'span', function () {
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});

The first problem however, is that apparently when I wrap a div around a tr tag, all tr and td tags are removed from the inserted HTML! Also when I click the span to view guestdetails nothing happens.

score 39 · Accepted Answer · answered Sep 16 '13 at 15:21

39

Do this:

 $( '#wrapper' ).on( 'click', 'a', function () { ... });

where #wrapper is a static element in which you add the dynamic links.

So, you have a wrapper which is hard-coded into the HTML source code:

<div id="wrapper"></div>

and you fill it with dynamic content. The idea is to delegate the events to that wrapper, instead of binding handlers directly on the dynamic elements.

answered Sep 16 '13 at 15:21

underscore

6,495
6
39
78

I tried this, see my updated post. But it doesn't work...what am I missing? – Adam Sep 16 '13 at 17:03

score 17 · Answer 2 · answered Sep 16 '13 at 15:27

17

Use .on() to attach event handlers which dynamically binds the html elements.Here is the link for documentation http://api.jquery.com/on/

write something like this

      $( '#someid' ).on( 'click', function () { ... });

or something like this.

          $(document).on( 'click', 'tag_name', function () { ... });

answered Sep 16 '13 at 15:27

Gourav

1,765
2
15
16

"on" click binds this event for any future elements matching the 'tag_name'. That's why this is special compared to "click" which only bind the event to the current elements. Whenever you need to bind events for dynamically loaded elements use "on". – Dhanuka777 Feb 24 '16 at 04:35
4

just the second one worked for me . – Nabzi May 16 '16 at 12:08
3

the second one saved my life. 4hours trying to fix it. many thanks man – Lincoln Jun 28 '16 at 09:10
4

` $(document).on( 'click', 'tag_name', function () { ... }); ` this solution worked for my case – bubencode Aug 31 '17 at 11:34

score 5 · Answer 3 · answered Sep 16 '13 at 15:31

jQuery.on() is used to bind any event on dynamically inserted HTML elements. Use it like this :

$(document).ready(function () {
    $(document).on('click',"#guestlist .viewguestdetails",function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});

jQuery onclick not firing on dynamically inserted HTML elements?

3 Answers3

Linked