（jQuery）点击事件有时不附加到其元素 - 似乎与打开的开发工具有关答案

【问题标题】：(jQuery) A click event is sometimes not attached to its element - seems tied to Developer Tools being open（jQuery）点击事件有时不附加到其元素 - 似乎与打开的开发工具有关
【发布时间】：2017-11-17 21:19:26
【问题描述】：

我已经尝试定位问题的根源已经几个小时了，我开始认为我的 bug 受到了观察者效应的影响！

总结：

我的页面上有复选框
整个页面加载完成后，为每个复选框附加一个监听器

var myModule = (function() {
    var myFunction = function() {
        console.log("Do something");
     }

    var setUpTogglers = function() {
        var dict = {
          "#checkbox1": "div.div1",
          "#checkbox2": "div.div2"
        };

        $.each(dict, function(i, elem) {
           var toggler = $(i);
           var fader = $(dict[i]);
           toggler.on('click', function() {
               myFunction(fader);
           });
        });
    };

    return {
        init: function() {
            setUpTogglers();
         }
    };
})();



$(window).on("load", function() {
    myModule.init();
});

这是一个非常简单的任务（至少我是这么认为的）。我的问题是由于 click 事件只在某些时间被监听。

这是一个不起作用的情况：

通过网站导航到带有复选框的页面
使用开发者工具检查复选框元素
检查“事件侦听器”选项卡
我的元素没有出现在点击根目录下

这是一个确实有效的案例

打开开发者工具
通过站点导航到带有复选框的页面
检查“事件侦听器”选项卡
我的元素确实出现在点击根目录下

我已经以各种方式对其进行了多次测试。我已经加载/刷新了开发者工具打开的页面并且没有监听器；我已经用 CTRL-F5 刷新了页面（并且开发者工具没有打开）并且有一个监听器；我设置了一个断点，监听器被连接，有时监听器被连接，有时它没有。

然而，在我过去一小时所做的所有测试中，当页面加载或刷新并打开开发者工具窗口时，侦听器已被附加。这让我相信这是某种加载顺序问题？我真的不知道从哪里开始调试这个。如果有人有任何建议，将不胜感激。

tldr：当开发者工具打开时，事件侦听器会附加到复选框，但并非总是否则会附加。发生这种情况的一些原因可能是什么？

注意：我使用的是谷歌浏览器

【问题讨论】：

标签： jquery google-chrome onclicklistener addeventlistener developer-tools

【解决方案1】：

根据提供的代码，我建议将其重构为硬编码字典，并且每个循环对我来说似乎都是狡猾和奇怪的。

为什么没有这样的东西？这也使您的代码可测试并且更容易使用控制台进行调试，因为您在问题中标记了谷歌开发工具等。

var myModule = (function() {

    function BindEventLister(jquerySelector, fader){

           $(''+jquerySelector+'').on('click', function() {
               myFunction(fader);
           });
     }

    var myFunction = function() {
        console.log("Do something");
     }


    var setUpTogglers = function() {

         BindEventLister("#checkbox1","div.div1");

         BindEventLister("#checkbox2","div.div2");
    };

    return {
        init: function() {
            setUpTogglers();
         }
    };
})();



$(window).on("load", function() {
    myModule.init();
});

我没有测试/运行这段代码，我只是快速输入一个粗略的想法来提供帮助。

【讨论】：

非常感谢。我会尝试类似的方法，并让您知道它是否有效。
大声笑，因为您正在对字典进行硬编码，为什么不放弃所有代码并将事件直接绑定到您想要的 div？ $(''#checkbox1).on('click', function() { myFunction("div.div1"); });$(''#checkbox2).on('click', function() { myFunction( "div.div2"); });呵呵，如果你只绑定这么少的项目，你为什么需要这个代码？
为了这个问题，我只给出了几个项目。有两个以上的键值对。它设置了迭代以避免代码重复。
好吧，我希望你能像我提供的那样采用更直接和可测试的方法，而不是硬编码和遍历字典:-)
对不起，我周末离开了这里。不幸的是，这并没有解决我的问题。我的猜测是，这是由于 DOM 的某些部分还不可见。我会调查的。谢谢！

【解决方案2】：

我发现一个外部库与我的脚本文件冲突。我认为这不会发生，因为我已将代码包装在模块中，但我不能正确命名空间。

当我删除这个外部库时，代码会按预期运行。

【讨论】：