Question

尝试将click事件添加到嵌套在多个元素（ul，div.col，li，div.panel，div.panel-body）之间的按钮上。我可以使用下面的代码访问它，但是好像我点击页面多次，console.logs开始循环并且执行数千次。

我几乎是肯定的是导致这种情况的函数的嵌套。但是我在JQuery中没有足够的背景知道能够准确地告诉浏览器正在做什么。

这是我的JQuery代码：

        $('#displayList #col1').click(function(){
        console.log('clicked col');
        $('li').click(function(){
            var id = $(this).attr('id');
            console.log(id);
            $('div.panel').click(function(){
                console.log('clicked panel');
                $('div.panel-body').click(function(){
                    console.log('clicked panel body');
                    $('button').click(function(){
                        console.log('clicked button');
                        return;
                    });
                    return;
                });
                return;
            });
            return;
        });
        return;
    });

你们中有一位精彩的JQuery大师可以解释导致这个错误的原因，并指出我是否有更好的路径来检查按钮是否被点击或者是否没有（只是单击了面板）。

另外，有没有人知道一个好的，最好是免费的调试程序，我可以通过执行来逐步执行JQuery代码？

非常感谢您的知识

Answer 1

您正在另一个事件处理程序中绑定一个事件处理程序。因此，每当后一个事件发生时，都会添加新的处理程序，最终导致同一个元素上的同一事件有多个处理程序。

您的代码应该类似于

$('#displayList #col1').click(function(){
    console.log('clicked col');
});
 $('li').click(function(){
    var id = $(this).attr('id');
     console.log(id);
});
$('div.panel').click(function(){
     console.log('clicked panel');
});
$('div.panel-body').click(function(){
      console.log('clicked panel body');
});
$('button').click(function(){
      // The following will be executed when the button is clicked 
      console.log('clicked button');
});

假设您有以下标记：

<div id="container>
  <div id="parent">
    <button>Click Me!</button>
  </div>
</div>

事件处理程序：

$("#container").click(function(){
  console.log("container got a click!");
});
$("#parent").click(function(){
  console.log("parent got a click!");
});
$("#parent button").click(function(){
  console.log("button got a click!");
});

现在如果单击按钮输出将

//button got a click!
//parent got a click!
//container got a click!

当你点击一个元素时，默认情况下它的所有祖先也会收到一个click事件，并且会调用相应的事件处理程序（如果有的话） - 这称为事件冒泡。如果您不需要任何特定功能，那么您不需要处理程序，因此不会受到伤害。

但是，您可以通过在事件处理程序中调用事件对象的stopPropagation()方法来阻止此行为：

$("#parent button").click(function(e){
      e.stopPropagation();
      console.log("button got a click!");
});

输出

//button got a click!

在某些浏览器中还有一种事件传播方法（所有主流浏览器都支持事件冒泡模型），您可以详细阅读@ quirksmore: Event order

评论中提及DFTR，

在Internet Explorer中启动应用程序时，Visual Studio允许javascript代码中的断点。另一个调试工具是firebug，这是一个非常整洁的firefox扩展

Answer 2

可能会帮助你。

如果您需要将事件绑定到按钮，则应使用descendant selector

$('#displayList #col1 li div.panel div.panel-body button').click(function() {
    console.log('clicked button');
});

JQuery检测嵌套元素上的点击交互导致巨大的循环

2 个答案: