（jQuery）单击事件有时不附加到其元素，似乎与打开的开发人员工具有关

几个小时以来，我一直在试图找出问题的根源，我开始认为我的bug受到了观察者效应的影响

总之：

• 我的页面上有复选框
• 整个页面加载完毕后，将侦听器附加到每个复选框

---

---

这是一个非常直接的任务（或者我认为是这样的），我的问题来自于点击事件只被监听了一段时间

以下是一个不起作用的情况：

• 通过站点导航到带有复选框的页面
• 使用开发人员工具检查checkbox元素
• 检查“事件侦听器”选项卡
• “我的元素”不显示在“单击根目录”下

这是一个它确实起作用的案例

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

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

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

tldr： 当开发人员工具处于打开状态时，事件侦听器将附加到复选框，但不总是附加到其他复选框。发生这种情况的原因是什么

---

注意：根据提供的代码，我正在使用Google Chrome，我建议将其重构为硬编码字典，每个循环对我来说似乎都是不可靠和奇怪的

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

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的某些部分还不可见。我会调查的。非常感谢。

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();
});