jQuery 동적 체크 박스 이벤트 처리

Question

JSON 응답에서 HTML을 추가 할 때 이벤트 핸들러는 이벤트 바인딩을 잃어 버리는 것처럼 보입니다. .live() 함수를 사용하면 처리기가 작동하는 것처럼 보입니다.

$.each(result[0], function(i,wellList) { 
    $jsonResult = wellList["@name"]; 
    $uid = wellList["@uid"]; 
    $dynamicCheckBoxDiv += '<input type="checkbox" name="checkbox-1" value="'+ $uid 
     + '" class="wellCheck" id="checkbox-'+i+'" />' + 
     '<label for="checkbox-'+i+'">' + $jsonResult + '</label>';    
}); 
$dynamicCheckBoxDiv += '</fieldset></div>'; 

//Append results to div 
$("#dynamicCheck").append($dynamicCheckBoxDiv).page(); 

$(".wellCheck").live('click', (function() { 

이 이벤트는 이제 클릭 기능이 실행될 때 발생합니다. 그러나 확인란을 몇 번 클릭하면 확인란이 잘못된 상자와 무작위로 연결되고 클릭 한 번으로 클릭 이벤트가 시작됩니다. 이걸 본 사람 있어요?

기타 : 별도의 버튼으로 모든 상자를 검사하는 방법을 어떻게 추가 할 수 있습니까? 그들은 동적으로 추가되고 있기 때문에 그냥이 기능을 무시하는 것 같습니다 :

// When select No wells is clicked this method is run 
$('#selectNone').click(function() { 
    $('#dynamicCheck .wellCheck').find(':checkbox').attr('checked', 'checked'); 
}); 

그것은 방법을 입력하지만 상자를 확인하지 않습니다. 이 페이지에 jQuery 및 jQuery 모바일이 추가되어 있고 두 방법 모두 document.ready 아래에 있습니다.

Answer 1

.wellCheck 요소가 확인란이므로 find(":checkbox")이 필요하지 않습니다. 그냥 다음과 같이하십시오 :

$("#selectNone").click(function(){ 
    $("#dynamicCheck .wellCheck").prop("checked", true); 
}); 

Demo.

Answer 2

첫 번째 비트 설명은 HTML로 작성된 것은 페이지로드에만 적용된다는 것입니다. HTML을 페이지에 추가 할 때마다 특별히 수신기를 설정해야합니다. 마찬가지로 "onclick"속성을 변경하면 리스너는 아무 일도하지 않습니다.

두 번째 비트의 문제점은 적어도 "$ (". wellCheck "). live (...) '가 모든 상자에 영향을 미친다는 사실과 관련이 있다고 생각합니다. 지금까지 매번 작성했습니다. '$ dynamicCheckBoxDiv.live (...)'와 같이 더 나은 서비스를 제공 할 수 있습니다.

정확한 구문에 대해서는 명확하지 않습니다. 수동으로 생성하지 않고 복제 된 HTML을 사용하여 더 많은 작업을 했으므로 DOM 개체 또는 뭔가 (이미 하나가 아닌 경우)로 렌더링하는 중재 단계 -하지만이 도움이 될 것 같아요.

또한 .live ("click", ...) '대신'.click (...) '을 사용할 수도 있습니다.

Answer 3

당신은 살 대리자를 사용해야합니다

$("#dynamicCheck").delegate('.wellcheck','click', function(){ 
//stuff on click 
}); 

이 더 나은 수행 살고 무엇을 몸보다 그 범위에 바인딩 될 것이다.

편집이 : 체크 박스 관리의 예이를 참조하십시오 : 오래된 ATTR를 사용 http://jsfiddle.net/h682v/3/

()와 지주() 대신하지만 원칙 유해를 사용해야합니다.