<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:
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.
해결책
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.
다른 팁
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 :