JQuery stopPropagation on .live() when handlers already exist and are bound

Question

I\'m aware that live calls bubble up through the doccument and that is why I\'m having issues.

Unfortunately I\'m using third party libraries that bind elements and wou

Answer 1

As you've already remarked, event delegation hinges on event bubbling and the use of a static element. The issue is complicated because there's nothing between the

and

elements, but we can get around that.

Set up a dynamic event handler for click events on the #inner element that's bound to #outer, and call event.stopImmediatePropagation() to prevent other event handlers from being executed. The downside is that this is dependent on the order in which the event handlers are bound, so your delegated event handler for #inner has to be bound before your static event handler for #outer.

$('#outer').on('click', '#inner', function(e) {
    console.log('inner');
    e.stopImmediatePropagation();
}).click(function(e) {
    console.log('outer');  
});

Take a look at this jsFiddle demo.

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...