jQuery on() 이벤트 위임

다음은 <div> 태그 모두에 위임됩니까? 즉 : 하나 또는 두 개의 이벤트 처리기? event.delegateTarget에 data-id을 캡처해야합니다. 이것은 각각 <div> 태그에 부착 할 때 간단하지만 20 개 정도를 가질 수 있습니다. 큰 차이는 아니지만 더 나은 이해를 원합니다.jQuery on() 이벤트 위임

on 메서드에 대해 selector을 제공하면 위임되지만 상태가 여러 요소에 연결되는 것과 약간 다른 경우 인 것으로 jQuery Docs에서 진술합니다. 브라우저 디버거 도구를 사용하여 결과 이벤트 처리기를 볼 수있는 방법이 있습니까?

내 처리기를 document에 연결하면 포함 된 내용을 쉽게 캡처 할 수 있습니까? div? 내 문서는 예제보다 훨씬 복잡하며, div 및 연관된 data-id은 input 요소의 직접적인 부모라는 사실에 의존 할 수 없습니다.

$(".target").on("change", "input", function (event) { 
... 
}); 

<div class="target" data-id="123"> 
    <input type="checkbox" name="alpha" value="1" /> 
    <input type="checkbox" name="alpha" value="2" /> 
</div> 

<div class="target" data-id="789"> 
    <input type="checkbox" name="beta" value="3" /> 
    <input type="checkbox" name="beta" value="4" /> 
</div>

출처

2013-02-01 andleer

그러나 당신은'input' 엘리먼트의 조상 인'div'에 의존 할 수 있습니다. '$ (this) .closest ('[data-id]')'를 사용하여'div '를 선택할 수 있습니다. – zzzzBov

이 두 <div> 요소 중 하나에 <input> 요소의 "변화"이벤트를 호출 할 수 있습니다 하나 개의 핸들러 함수입니다.

이벤트 처리기는 이벤트 대상을 검사하고 적절하게 처리하는 jQuery 내부 작업입니다.

핸들러에서

$('body').on('change', '.target input', function() { ... });

, this가 <input> 될 것입니다 그리고 당신은 컨테이너를 찾을 .closest('.target')을 사용할 수 있습니다 : 당신이 <body>에 연결할 경우

, 당신은이 작업을 수행 할 것입니다.

출처

2013-02-01 22:02:00 Pointy

저는 그것이 당신이 요구하는 것이라면 두 개의 별도 대표단이라고 생각합니다. 핸들러 함수에 대한 별도의 참조는 두 개의 .target div에 각각 첨부되며 각 div는 자체 체크 상자 쌍에 의해 트리거 된 이벤트를 처리합니다.

두 div의 공통 조상에 바인딩하는 경우을 사용하여 div가 포함 된 항목을 항상 찾을 수 있습니다 (Pointy가 제안했습니다).

출처

2013-02-01 22:08:06 bfavaretto

jQuery on() 이벤트 위임

답변

관련 문제