Question

我使用一些html：table，复选框填充元素。我的复选框中有一个onclick事件，但该页面似乎没有收听click事件。我怀疑是因为它是在javascript checkall（）函数放入DOM后加载的。

这就是我所拥有的：

<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>

简单地说，当我到达此页面时，我可以从下拉菜单中选择一个客户。没有什么太复杂的然后，Jquery在服务器上调用一个页面，以获取有关该客户的一些信息。信息实际上是一个Notes列表，所以没什么大不了的。但我将笔记格式化为html表格。

该html表中的第一列有复选框，对应于每个Note记录。我还在顶部放置了一个主复选框，因此如果我选中该复选框，则会检查所有复选框。

html表加载非常棒，但是主复选框无法正常工作。

这是我加载到

中的html表

<?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).'");
?>

checkall（）;如果我在页面加载时加载表，则函数可以正常工作，但是当我加载带有新数据的新表时则不行。

我被告知这是live（）或bind（）帮助的地方，但老实说我不理解jquery文档。

Answer 1

使用.bind()将绑定到在调用绑定函数时存在的所有匹配DOM元素的事件。使用.live()将绑定到方法调用时存在的所有匹配DOM元素以及将来动态添加的任何匹配DOM元素。

因此，如果要添加要运行某些jQuery的元素，则应使用.live()在添加时自动将事件处理函数绑定到这些元素。

由于您将<input type="checkbox" id="checkall" class="checkall" onclick="checkall();" />作为表格的一部分写出，我会将您的代码修改为：

从输入元素中删除onclick属性。

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

使用live函数

添加点击处理程序

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

Answer 2

.bind()在函数调用时为所有匹配元素设置一个动作侦听器。

.live()将遍历DOM树并在操作时响应所有过去和将来的匹配元素。（这个）

我希望bind更有效率，但live会更好地支持添加/删除DOM元素。

jquery bind vs live

2 个答案: