title: dynamic checkbox insertion, jquery onchange event lost
body: <p>I have the following:</p>
  
  <p>somefile.php  </p>
  
  <pre><code>$("document").ready(function() {  
      var handler = function(data) {  
      var JsDiv = document.getElementById("somediv");
      JsDiv.innerHTML = data;
    };
  
  $("input[type='checkbox']").change( function() {
      console.log("execute lots of code in this function");
      //I need to execute this part again with the new checkboxes
      //.
      //.
      //.
      //and then
  $.ajax({
          url: "ajaxFile.php",
          success: function(data, textStatus, XMLHttpRequest) { handler(data); }
  });
  
    });
  });
  </code></pre>
  
  <p><code>&lt;div id="somediv"&gt;</code><br>
      <code>&lt;input type="checkbox" id="someid1" value="anything1" /&gt; checkbox1</code><br>
      <code>&lt;input type="checkbox" id="someid2" value="anything2" /&gt; checkbox2</code><br>
    <code>&lt;/div&gt;</code>  </p>
  
  <hr>
  
  <p>ajaxFile.php<br>
    <code>echo "<br>
    &lt;input type='checkbox' id='someid3' value='anything3' /&gt; checkbox3 &lt;br /&gt;<br>
    &lt;input type='checkbox' id='someid4' value='anything4' /&gt; checkbox4<br>
    ";</code></p>
  
  <hr>
  
  <p>The problem is that $("input[type='checkbox']").change( function() {}) gets executed just fine when I first load the page, but once the new checkboxes have been loaded via ajax, they are not bounded to that function. I've seen things about bind() and live() but I don't quite get how to bind the new checkboxes to the function that I've already defined. I need to execute some code that is inside .change().. I would extract that code outside of .change() and call that function afterwards but I am not too sure how to do so. </p>
  
  <p>If my question is not clear, please let me know and I will re-phrase. Thank you for your help.</p>