jquery bind vs live

Question

일부 html : table, checkboxes 요소를 채우고 있습니다. 내 체크 박스에 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 테이블의 첫 번째 열에는 각 메모 레코드에 해당하는 확인란이 있습니다. 맨 위에 마스터 체크 박스를 추가 했으므로 확인란을 선택하면 모든 상자가 선택됩니다.

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에로드 HTML 테이블의(); 함수는 페이지가로드 될 때 테이블을로드하면 잘 작동하지만 새 데이터로 새 테이블을로드 할 때는 작동하지 않습니다.

나는 이것이 live() 또는 bind()가 도움이되는 곳이라고 들었지만 정직하게 jquery 문서를 이해하지 못했습니다.

Answer 1

.bind()을 사용하면이라는 시간에 에 존재하는 모든 일치하는 DOM 요소에 대한 이벤트에 바인딩됩니다. .live()을 사용하면 메서드 호출시 존재하는 모든 일치하는 DOM 요소에 과 일치하는 DOM 요소가 나중에 동적으로 추가됩니다 ().

그래서 jQuery를 실행하려는 요소를 추가하는 경우 .live()을 사용하여 이벤트 처리기 함수를 추가 할 때 해당 요소에 자동으로 바인딩해야합니다.

당신이 테이블의 일환으로 <input type="checkbox" id="checkall" class="checkall" onclick="checkall();" />을 쓰기 때문에, 나는이에 코드를 수정합니다 :

1. 는 입력 요소에서 온 클릭 속성을 제거합니다.

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

2. 는

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

Answer 2

.bind() 함수 호출시에 일치하는 모든 요소 위한 액션 리스너를 설정 live 함수를 사용하여 클릭 핸들러를 추가한다.

.live()은 DOM 트리를 순회하고 동작 시점에서 모든 과거와 미래의 일치 요소에 응답합니다.(IIRC)

bind이 더 효율적일 것으로 예상되지만 live은 DOM 요소 추가/제거를 더 잘 지원합니다.