Question

我已经查看了人们在事件冒泡和jQuery两次触发时遇到的所有问题，但我无法弄清楚这个问题。我一次只点击一个DIV，但是点击处理程序会触发两次。

HTML

<div class="scroll-content-item" data-pid="1773">
    <img src="somefile" class="mixdock-img" data-pid="1773"/>
</div> 
<div class="scroll-content-item" data-pid="1777">
    <img src="someotherfile" class="mixdock-img" data-pid="1777"/>
</div>

...的jQuery

jQuery(document).ready(function($) {

var count = 0;

// On click, hide the currently displayed post and show the one clicked
$('.scroll-content-item').click(function () {
    count += 1;
    alert("count = "+count);
    event.stopPropagation();
});

});

这样做是为每次点击显示两个警报，每个警报具有相同的计数。每次点击都会增加计数。

Answer 1

您必须将event变量传递到您的函数中，如下所示：

$('.scroll-content-item').click(function (event) {

Answer 2

我无法在jsbin：http://jsbin.com/ixabo4

上重现该问题

你有可能两次包含jQuery脚本吗？

Answer 3

听起来整个代码执行两次，你的两个完整实例：

jQuery(document).ready(function($) {
  //...
});

...正在执行（每个都有自己的count变量），确保脚本未在页面中包含两次。要确认这是问题，您可以添加警报（此时您应该看到两次）：

jQuery(document).ready(function($) {
  alert("init");
  //...
});

Answer 4

jQuery(document).ready(function($) {

        var count = 0;

        // On click, hide the currently displayed post and show the one clicked
        $('.scroll-content-item').click(function(e, ui) {
            e.stopPropagation();
            count += 1;
            alert("count = " + count);
        });

    });

在我的测试中工作正常。即使是嵌套的div，类为“scroll-content-item”。我会确保你不会多次将一个监听器附加到点击处理程序。

如果找不到调用代码的位置，请在附加侦听器之前添加以下内容：

$('.scroll-content-item').unbind('click');

Answer 5

$('.scroll-content-item').unbind('click').bind('click', function(e) {
    alert("clicked");
});

jQuery两次射击，事件冒泡？

5 个答案: