title: jQuery onclick not firing on dynamically inserted HTML elements?
body: <p>My onclick event works.
  However, when that onclick event is on dynamic HTML, it no longer works. As in: nothing happens.</p>
  
  <pre><code>$(document).ready(function () {
      $("#guestlist .viewguestdetails").click(function () {        
          $(".guestdetails[data-id='18']").toggle();
      });
  });
  </code></pre>
  
  <p>I'm then dynamically adding this HTML to a page:</p>
  
  <pre><code>&lt;div id="guestlist"&gt;    
      &lt;span class="completeguestdetails" data-id="18"&gt;(add your data)&lt;/span&gt;  
          &lt;div class="guestdetails" data-id="18" style="display: none;"&gt;
              some data
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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:</p>
  
  <pre><code>$("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') &amp;&amp; $("#guestreception").hasClass('checkbox-on') &amp;&amp;
          $("#guestdiner").hasClass('checkbox-on') &amp;&amp; $("#guestparty").hasClass('checkbox-on')) {
              $("#guestday").removeClass('checkbox-off').addClass('checkbox-on');
          }
      }
  });
  </code></pre>
  
  <p>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:</p>
  
  
  
  
  
  <p>and then in ready() function:</p>
  
  <pre><code>$('.newrow_wrapper').on('click', 'span', function () {
      $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
  });
  </code></pre>
  
  <p>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.</p>