jquery 이벤트 네임 스페이스 버블 링 문제

Question

jQuery 플러그인을 개발하는 동안 이벤트 네임 스페이스 문제가 발생했습니다. 여기

는 요컨대, I는 하위 및 상위에 네임 스페이스가 이벤트 리스너를 부착 세 개의 버튼을 만든

jQuery('#content div.child') 
    .bind('a.a',function(){alert('a-child');}) 
    .bind('a.b',function(){alert('b-child');}) 
    .bind('a.c',function(){alert('c-child');}); 


jQuery('#content div.parent') 
    .bind('a.b',function(){alert('b-parent');}) 
    .bind('a.c',function(){alert('c-parent');}); 


jQuery('a.btn-a') 
    .click(function(){ 
     jQuery('#content div.child').trigger('a.a'); 
    }); 


jQuery('a.btn-b') 
    .click(function(){ 
     jQuery('#content div.child').trigger('a.b'); 
    }); 


jQuery('a.btn-c') 
    .click(function(){ 
     jQuery('#content div.child').trigger('a.c'); 
    }); 

JQuery와는 각각의 트리거된다는 HTML 여기

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

<a class="btn-a">trigger a</a> 
<a class="btn-b">trigger b</a> 
<a class="btn-c">trigger c</a> 

인 이벤트 (aa, ab, ac). 부모는 a.b 및 a.c. 만 듣고 있습니다. 자식에서 a.a를 트리거하는 버튼을 클릭하면 a.a에 대한 div.child 리스너 만 해고되지만 전체 'a'네임 스페이스 이벤트는 div.parent 리스너, a.b 및 a.c로 바뀌어 트리거됩니다. 제 질문은 어떻게 이벤트 네임 스페이스를 계속 사용하지만 의도 한 이벤트 버블 (즉, a.a는 자식과 부모 모두에게 발생하는 유일한 이벤트 임)을 사용하는 것입니다. 나는 stopPropagation과 stopImmediatePropagation을 알고있다. 나는 아이들에게 거품을 내고 싶을 때가 있기 때문에 이것을 a.b와 a.c 청자에게 두는 것을 원하지 않을 것입니다. 예를 들어, 아이에게 'a.b'를 트리거하면, 'a.b'와 'a.b'이벤트 만이 아이와 부모에 의해 처리 될 것으로 기대합니다.

감사

Answer 1

나는 문제는 전혀 모르겠지만,이처럼 보인다는 행동이 당신이 원하는입니다 : http://jsfiddle.net/cHrSG/

네임 스페이스가되지 전에 후 이벤트, 그래서 형식은 event.namespace, the jQuery docs have a thorough read here. 코드를 바꿔서 코드를 바꾼다면 예상 한 효과가 있습니다. 질문에서 알 수있는 것처럼 가장 좋은 결과라고 생각합니다.

jQuery('#content div.child') 
    .bind('a.a',function(){alert('a-child');}) 
    .bind('b.a',function(){alert('b-child');}) 
    .bind('c.a',function(){alert('c-child');}); 
jQuery('#content div.parent') 
    .bind('b.a',function(){alert('b-parent');}) 
    .bind('c.a',function(){alert('c-parent');}); 
jQuery('a.btn-a') 
    .click(function(){ 
     jQuery('#content div.child').trigger('a.a'); 
    }); 
jQuery('a.btn-b') 
    .click(function(){ 
     jQuery('#content div.child').trigger('b.a'); 
    }); 
jQuery('a.btn-c') 
    .click(function(){ 
     jQuery('#content div.child').trigger('c.a'); 
    });​