jquery bind vs live

Question

I am populating an element with some html: table, checkboxes. I have an onclick event in my checkbox, but the page doesn't seem to be listening to the click event. I suspect it's because it was loaded after the javascript checkall() function got put into the DOM.

Here's what I have:

<select name="showcuslist" id="showcuslist">
  <option value="0">select a customer</option>
  <option value="1">John Smith</option>
  <option value="2">Jane Smith</option>
</select>

<div id="loadtables">---ajax loads stuff into here---</div>

<script language="javascript" type="text/javascript">
$(document).ready(function(){ 

  $("#showcuslist").change(function(){
   $.ajax({
     data:"formId=grabcusinfo&cusid="+$(this).val(),
     success:function(response){ eval(response); } 
   });
  });


});

function checkall(){
  $(".checkboxes").attr("checked",true);
}
</script>

Simply, when I get to this page I can select a customer from the dropdown menu. Nothing too complicated.
Jquery then calls a page on the server for the purpose of grabbing some info about that customer. The info is actually a list of Notes, so nothing huge. But I format the notes into an html table.

The first column in that html table has checkboxes, corresponding to each Note record. I also put a Master Checkbox in the top, so if I check that box, all boxes will be checked.

The html table loads fabulously, however, that master checkbox isn't working.

Here's the html table I load into the

<?php
    $alltables='<table>';
    $alltables.='<tr>';
      $alltables.='<th><input type="checkbox" id="checkall" class="checkall" onclick="checkall();" /></th>';
      $alltables.='<th>Notes Title</th>';
    $alltables.='</tr>';

    $alltables.='<tr>';
      $alltables.='<td><input type="checkbox" id="someID" class="checkall" /></td>';
      $alltables.='<td>Notes Title Text...</td>';
    $alltables.='</tr>';
    $alltables.='</table>';

    $("#loadtables").html("'.addslashes($alltables).'");
?>

The checkall(); function works fine if I load the table when the page loads, but not when I load a new table with new data.

I've been told this is where live() or bind() helps out, but I'm honestly not understanding the jquery docs.

See some generic benchmarks [http://stackoverflow.com/questions/2690370/live-vs-bind/7692651#7692651][1] [1]: http://stackoverflow.com/questions/2690370/live-vs-bind/7692651#7692651 — Watermark Studios, Oct 13 '11 at 08:28

Kyle Trauberman · Accepted Answer · 2011-08-26T21:26:08.630

Using .bind() will bind to an event for all matching DOM elements that exist at the time that the bind function was called. Using .live() will bind to all matching DOM elements that exist at the time of the method call and any matching DOM elements that get added dynamically in the future.

So, if you are adding elements that you want to run some jQuery against, you should use .live() to automatically bind the event handler function to those elements as they are added.

Since you are writing out <input type="checkbox" id="checkall" class="checkall" onclick="checkall();" /> as part of the table, I would modify your code to this:

remove the onclick attribute from the input element.

<input type="checkbox" id="checkall" class="checkall" />

add the click handler using the live function

$(".checkall").live("click", function() { checkall(); });

score 2 · Answer 2 · answered Aug 26 '11 at 21:05

.bind() sets an action listener for all matching elements at the time of the function call.

.live() will traverse the DOM tree and respond to all past and future matching elements at the time of the action. (IIRC)

I would expect bind to be more efficient, but live will better support adding/removing DOM elements.

jquery bind vs live

2 Answers2