Question

I have a table that I’m displaying using datatables. One of the columns in the table is a checkbox. Checking (or unchecking) the checkbox causes an Ajax event. Like so:

<script type="text/javascript">
  $(document).ready(function() {
    $(".data-table").dataTable({});
    $(".my-checkbox").click(function() {
       $.ajax(....)
    })
  })
</script>

<table class="data-table">
  <tr>
    <td><input type="checkbox" class="my-checkbox"></td>
  </tr>

  <!-- repeat many times -->
</table>

This works great on the initial page load, but as soon as I use the “search” box, the change() method is unbound from anything found by search.

Is there an API hook that I can use to re-bind my click() handler to the checkboxes once the search is complete? Or is there a better way?

Answer 1

.click is a shortcut to .bind, which bind only for elements in the page. You have to use .live:

$('.my-checkbox').live('click', handler);

Another option is to use delegate:

$('.data-table').delegate('.my-checkbox', 'click', handler);

Update: as of jQuery 1.7+, both .live and .delegate have been deprecated and superseded with .on:

$('.my-checkbox').on('click', handler);