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.

Solution 1

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.

Solution 2

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 () { ... });

Solution 3

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

Comments

[Adam]

I tried this, see my updated post. But it doesn't work...what am I missing?