jQuery Listener 어린이 제외

Question

dd 항목의 dl 목록이 있습니다. 각 dd 항목에는 리스너가 첨부되어 있으므로 (아래 참조) 클릭하면 페이지를 다시 작성하고 일부 내용을 변경할 수 있습니다. 이러한 각 dd 항목에는 체크 박스가 있지만 그 리스너에서 제외되기를 원하기 때문에 (다른 리스너가 선택할 수 있도록)

발생하는 문제는 dd의 아무 곳이나 클릭 할 때마다 확인란을 클릭해도 확인란 청취자가 아닌 dd 수신기가 적용됩니다. dd 안에 div를 설정하고 리스너를 개별적으로 적용하지 않고 클릭 한 것을 구별 할 수있는 방법이 있습니까?

예 HTML 코드 :

<dl> 
    <dd class="class1 class2 class3">Some text and stuff 
    <input type="checkbox" class="class1 checkBox"> 
    </dd> 
</dl> 

예 jQuery를 코드 :

$("class1.checkbox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    console.log("test"); 
}); 

$("dd.class1.class2").live("click", function() { 
    //Do some cool stuff 
}); 

Answer 1

$(":checkbox").live("click", function(e) { 
     e.stopPropagation(); 
    //Do some other, completely different, cool stuff 
    //console.log($(this).parent().attr("id")); 
    alert("test"); 
}); 

$("dd.class1.class2").live("click", function (e) { 
    e.stopPropagation(); 
    //Do some cool stuff 
    alert("test2"); 
}); 

http://jsfiddle.net/PsaHQ/4/

Answer 2

당신은 이벤트 버블 링을 중지해야합니다.

$(".class1:checkbox").click(function(e) { 
    alert('clicked checkbox'); 
    e.stopPropagation(); 
}); 

$("dd.class1.class2").click(function() { 
    alert('clicked dd'); 
}); 

http://api.jquery.com/event.stopPropagation/

"버블 링"의 개념은 당신이 클릭 이벤트와 자식 요소가있는 경우처럼 당신이 그것을 부모의 클릭 이벤트를 트리거하지 않으

. event.stopPropagation()을 사용할 수 있습니다.

event.stopPropagation()은 기본적으로이 자식 이벤트에이 클릭 이벤트를 적용하고 부모 컨테이너에 아무런 반응을 나타내지 않으므로 아무 말도하지 않습니다.

이벤트 캡처 :

   | | 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 \/  |  | 
| -------------------------  | 
|  Event CAPTURING   | 
----------------------------------- 

이벤트 버블 링 :

   /\ 
---------------| |----------------- 
| element1  | |    | 
| -----------| |-----------  | 
| |element2 | |   |  | 
| -------------------------  | 
|  Event BUBBLING   | 
----------------------------------- 

당신이 live()를 사용하거나 작동하지 않을 수 있지만 delegate() 당신이 return false;에 필요합니다. 아래 견적을 읽으십시오. JQuery docs 당

: 그들은 에 문서의 상단을 전파 한 후에는 .live() 메소드가 이벤트를 처리하기 때문에

, 라이브 이벤트의 전파를 중지 할 수 없습니다. 비슷하게 .delegate()가 처리하는 이벤트는 위임 된 요소에 을 전달합니다. 에 바인딩 된 이벤트 핸들러는 위임 된 이벤트 핸들러가 호출 될 때까지 이미 실행 된 것입니다. 따라서 이러한 핸들러 은 delegated 처리기가 event.stopPropagation()을 호출하거나 false를 반환하여 트리거하지 못하게 할 수 있습니다.

좋은 자원 : http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 3

좋아, 당신은 여기에 큰 하나까지 추가 작은 문제들을 잔뜩있어.

첫 번째 선택자에 2 개의 문제점이 있습니다. 아래의 업데이트 선택 봐 (그리고 총액을 알) :

$(".class1.checkBox").live("click", function() { 
    //Do some other, completely different, cool stuff 
    console.log("test"); 
    return false; //added. 
}); 

을 당신이 다음 JQuery와 리스너에 버블 링에서 이벤트를 중지하려면, 단지 false를 돌려줍니다.

Answer 4

그냥 DD에 클릭 이벤트를 바인딩하고 대상 대리자를 확인 적절하게

$("dd.class1.class2").live("click", function (event) { 
     if($(event.target).is(":checkbox")) 
     { 
      console.log("put checkbox func here"); 
     }else{ 
      console.log("put div func here"); 
     } 
    }); 

작업 예 : 는 HTML 모든 동적 인 http://jsfiddle.net/QWLpd/1/