javascript - 奇怪的jquery事件冒泡

Question

我不确定这是否真的是一个事件冒泡问题。 event.stopPropagation() 不能解决问题。场景是:

1. 点击元素类“clickMe”(任意次数的点击)
2. 然后点击 li 元素。点击事件将根据“clickMe”类的点击次数执行。

下面是代码片段:

html:

<div class="clickMe">Click Me 1</div>
<div class="clickMe">Click Me 2</div>
<div class="clickMe">Click Me 3</div>
<ul id="test">
    <li><a href="#">Test A</a></li>
    <li><a href="#">Test B</a></li>
    <li><a href="#">Test C</a></li>
</ul>​​​​​​​​​​​​​​​​​​

js:

$(function() {
    $('.clickMe').live('click', function(e){
        //e.stopPropagation()
        $('li', $('#test')).live('click',function(e){
            //e.stopPropagation()
            alert('ouch')            
        })        
    })
});

预先感谢您提供有关此问题的任何帮助或解释。

Answer 1

您正在向 <li> 添加另一个点击处理程序每当“clikMe”之一发生“点击”时元素 <div>元素。 jQuery 代码维护所有这些处理程序，因此在您单击“clickMe”几次后，会出现多个处理程序，并且它们都会被调用。

.live()方法不是委托(delegate)事件处理的最佳方式。使用.on()如果您使用的是新版本的 jQuery，或者至少 .delegate() .