doubleclick 이벤트가있는 Jquery .on

doubleclick 이벤트가있는 Jquery .on

---

이것이 작동하는 이유 :

$(document).on("dblclick", "#areaA tr:has(td)", function(e) {
     //code here
 });

그리고 이것은

$("#areaA tr:has(td)").on('dblclick', function(e) {
    //Code here
});

jquery 문서 페이지의 예제를 정확히 따르고 있지만 두 번 클릭이 실행되지 않습니다. 첫 번째 방법으로 수행하면 작동하지만 이벤트가 두 번 발생하는 것처럼 보입니다.

이것은 Kendo UI 그리드의 컨텍스트입니다.

이 두 코드 사이에 실제로 차이가 있습니까?

---

가장 큰 차이점은 클릭 할 때마다 첫 번째 조건이 확인된다는 것입니다. 따라서 id areaA또는 tr또는 td내부 요소가 동적으로 추가되면 첫 번째 요소 만 작동 할 수 있습니다.

---

설명하는 첫 번째 방법은 정적 부모를 선택한 다음 동적 자식을 선택하기 때문에 작동합니다. 동적 자식은 .on 메서드를 사용하여 동적으로 생성 된 요소에 이벤트를 바인딩하는 규칙을 따릅니다.

다음은 .on방법에 대한 구문입니다 . 이미 약간 공부 한 것처럼 들립니다.

$(selector).on(event,childSelector,data,function,map)

따라서를 사용하여 동적 요소에 바인딩하려면 .on먼저 정적 부모 요소를 달러 기호로 선택한 다음 .on메서드 내 에서 동적 자식 요소를 선택해야합니다. 귀하의 경우 올바른 사용 사례는 다음과 같이 작동합니다.

$("body").on('dblclick', '#areaA tr:has(td)', function(e) {
    //Code here
});

작동하지 않는다고 언급 했으므로 #areaA정적 요소가 아니라고 가정 합니다. 좀 더 관련성이 높은 정적 요소로 body를 교체하거나 body를 그대로 두어도 상관 없습니다.

---

이 두 코드 사이에 실제로 차이가 있습니까?

예. 첫 번째 코드는 하위 요소에 의해 트리거 된 문서를 버블 링하는 이벤트에 의해 핸들러가 시작되는 위임 된 이벤트 처리의 한 형태입니다. 두 번째는 지정된 선택자 (이 경우 #areaA tr:has(td)) 에 대해 jQuery가 반환 한 실제 요소에 이벤트 핸들러를 바인딩하는 것  입니다.

다음은 jQuery 문서의 관련 정보입니다.

첫 번째 코드 :

위임 된 이벤트 는 나중에 문서에 추가 되는 하위 요소의 이벤트를 처리 할 수 ​​있다는 장점이 있습니다 . 위임 된 이벤트 처리기가 연결될 때 존재하도록 보장되는 요소를 선택하면 위임 된 이벤트를 사용하여 이벤트 처리기를 자주 연결하고 제거 할 필요가 없습니다.

두 번째 코드 :

이벤트 핸들러는 현재 선택된 요소에만 바인딩됩니다. 코드가 .on ()을 호출 할 때 존재해야합니다.

참조 URL : https://stackoverflow.com/questions/13633789/jquery-on-with-doubleclick-event