jQuery onclick not firing on dynamically inserted HTML elements? [duplicate]

StackOverflow https://stackoverflow.com/questions/18831568

  •  28-06-2022
  •  | 
  •  

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.

Était-ce utile?

La solution

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.

Autres conseils

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

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();
    });
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top