title: Dynamically changing HTML text breaks jquery script
body: <p>I have some portion of HTML on my site, whereby when the user makes a selection, aspects of the HTML text changes.</p>
  
  <p>Meaning - when the user makes a selection on, say, a checkbox, some text within a specified <code>div</code> is modified.</p>
  
  <p>However, I am unable to execute scripts whenever the HTML has been modified. The pertinent IDs and classess within this DIV are unchanged, and other untouched HTML will trigger the script just fine. What is it about the HTML after it's been programmatically altered, makes it not trigger the script?</p>
  
  <p>The code I'm referring to is:</p>
  
  <pre><code>&lt;input type='checkbox' id='switch'&gt;Switch text
  &lt;div id="example"&gt;
      &lt;input type='checkbox' class='trigger' id='box1'&gt;Text Text AAA
      &lt;input type='checkbox' class='trigger' id='box2'&gt;Text Text AAA
      &lt;input type='checkbox' class='trigger' id='box3'&gt;Text Text AAA&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#switch').change(function () {
      if ($('#switch').is(':checked')) {
          var str = $('#example').html().replace(/AAA/g, 'Hello');
          $('#example').html(str);
      }
  });
  
  $('.trigger').change(function () {
      if ($(this).is(':checked')) {
          alert('It worked');
      }
  });
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/L82r45ob/" rel="nofollow">http://jsfiddle.net/L82r45ob/</a></p>