2010-04-29 2 views
0

Я наткнулся на проблему с пространством имен событий при разработке плагина jQuery.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> 

Вот это JQuery

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'); 
    }); 

В общем, я приложил Namespaced слушателя событий для детей и родителей и создали три кнопки, которые вызывают каждый из события (aa, ab, ac). Обратите внимание, что родитель только слушает a.b и a.c. Когда я нажимаю на кнопку, которая запускает a.a на дочернем, запускается только прослушиватель div.child для a.a, но все событие пространства «a» пузырится до слушателей div.parent, a.b и a.c и запускает их. Мой вопрос в том, как бы я по-прежнему использовать пространство имен событий, но только для предполагаемого события пузырь (то есть a.a - единственное событие, которое срабатывает как для дочернего, так и для родительского). Я знаю о stopPropagation и stopImmediatePropagation. Я бы не хотел ставить их на прослушиватели a.b и a.c, потому что есть моменты, когда я хочу, чтобы они пузырились. Например, когда я запускаю «a.b» для дочернего элемента, я ожидал бы, что «a.b» и только событие «a.b» будут обработаны дочерним и родительским.

Благодаря

ответ

2

Я не совсем уверен, что от вопроса, но кажется, что это поведение, которое вы хотите: 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'); 
    });​ 
+0

Спасибо, Ник, это было именно оно. Я видел документы, но не подключался к тому, что у меня было в обратном порядке. –

Смежные вопросы