Question

使用以下html和jQuery，如果我多次单击第一个锚点，然后单击列表锚点，我会按照单击第一个锚点的次数显示警报消息。为什么是这样？我该如何阻止它发生？

<div>
    <a href="#">click me</a>
    <ul style="display:none">
        <li><a href='#'>now click me</a></li>
    </ul>
</div>


$('div > a').click(function(e) {
    e.preventDefault();

    $(this).next().show().find('a').click(function() {
        alert("alert from inner click");
        return false;
    });
});

Answer 1

因为每次调用锚的单击处理程序时，您都会连接另一个锚的事件处理程序的另一个实例。大概你只想连接一次，但不知道你想要实际做什么......

如果您尝试更改当您点击第一个锚点时第二个锚点上发生的事情，您可以先从锚点取消绑定所有click个处理程序，如下所示：

$('div > a').click(function(e) {
    e.preventDefault();

    $(this).next().show().find('a').unbind('click').click(function() {
        // New bit is here.........^^^^^^^^^^^^^^^^
        alert("alert from inner click");
        return false;
    });
});

...但我怀疑对总体目标有更好的了解，会有更好的解决方案。（上面的一个问题是它会从锚点中删除所有click个处理程序，无论是否被该代码或其他东西连接起来，这与其他人没有很好地协作。）

Answer 2

也许你可以使用event.stopPropagation()

Answer 3

这种情况正在发生，因为每次单击第一个链接时，您都会在列表中的锚点上绑定click事件。

你想达到什么目的？

Answer 4

基本上，当您单击第一个链接时，会将新的单击事件附加到嵌套链接。有两种解决方案。

首先，您可以在再次设置之前取消绑定第二次单击事件：

$('div > a').click(function(e) {
    e.preventDefault();

    $(this).next().show().find('a')
        .unbind('click')
        .click(function() {
            alert("alert from inner click");
            return false;
        });
});

另一个更好的解决方案是在第一次点击活动之外附加另一个点击。

Answer 5

如果你真的想要在第一个处理器中绑定第二个单击处理程序，你可以将第二个处理程序包装到一个函数中，并首先尝试取消绑定此函数：

$(this).next().show().find('a')
    .unbind("click", someFunction)
    .click(someFunction);

你也可以在第二个处理程序中将一些标志设置为true，以检查它是否之前被调用过。

但据我所知，这里的主要问题是为什么return false不会阻止事件传播，对吧？这需要进一步的研究，正如我所期望的那样。

当只有一个想要时，Jquery多个事件

5 个答案: