title: jQuery function not working after making an ajax call
body: <p>There is a dropdown in the page - <code>ddlFilter</code>, and also a checkbox (with id 239 inside <code>divData</code>) at page load. Changing the value of the dropdown, will make an ajax call and then replace the <code>divData</code>'s content with the one that is received. The received content is HTML of another checkbox (say id 249).<br>
  When any checkbox is clicked, it should fire <code>showProduct()</code></p>
  
  <p><strong>ISSUE :</strong> Initially after page load, when I click checkbox 239, <code>showProduct</code> is fired. But after changing the dropdown and clicking on checkbox 249, the function isn't fired. </p>
  
  <p>There are no errors in console. I think the event handling is not bound to the asynchrounosly added  checkbox. How can i fix this.</p>
  
  <p><strong>ASPX:</strong></p>
  
  <pre><code>&lt;asp:dropdownlist id="ddlFilter" runat="server/&gt;
  
  &lt;div id="divData"&gt;
  &lt;input type="checkbox" class="chkBx" id="239"&gt; --line 1
  
  &lt;!--On changing the dropdown value, line 1 will be replaced by this.--&gt;
  &lt;!--&lt;input type="checkbox" class="chkBx" id="249"&gt;--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(document).ready(function(){
   $("#ddlFilter").change(function(){
     //code to make ajax call and bind new html inside divData
   })
  
   $(".chkBx").change(function(){
     showProduct();
   })
  })
  
  function showProduct(){
    alert();
  }
  </code></pre>