jquery bind vs live

Question

我用一些html：table，複選框填充元素。 我在我的複選框中有一個onclick事件，但該頁面似乎沒有在聽點擊事件。我懷疑這是因爲它是在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記錄。 我也在頂部放了一個Master複選框，所以如果我選中該複選框，所有的複選框都會被選中。

然而，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();" />，我會修改代碼以這樣的：

1. 刪除輸入元素的onclick屬性。

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

2. 使用live功能

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

Answer 2

.bind()設置在函數調用時所有匹配的元素一個動作偵聽器添加單擊處理程序。

.live()將在動作時遍歷DOM樹並響應所有過去和將來的匹配元素。（IIRC）

我期望bind效率更高，但live將更好地支持添加/刪除DOM元素。