Question

我一直试图找出问题的根源几个小时，我开始认为我的错误会受到观察者效应的影响！

总结：

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

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

这是一项非常直接的任务（不管怎么说，我想。）我的问题来自于仅在某些时候被监听的点击事件。

以下是不起作用的情况：

使用复选框
使用Developer Tools
检查“事件听众”＆＃39;标签
我的元素未显示在点击根

这是一个可行的案例

打开开发人员工具
使用复选框
检查“事件听众”＆＃39;标签
我的元素确实出现在点击根

我已经多次以各种方式测试过它。我已经打开开发人员工具加载/刷新页面而没有监听器;我用CTRL-F5刷新了页面（开发者工具未打开），HAD是一个听众;我设置了一个断点，监听器附加了这个断点，有时监听器会被附加，有时它不会。

在我过去一小时内所做的所有测试中，当打开Developer Tools窗口加载或刷新页面时，监听器已经附加了。这让我相信它是某种负载顺序问题？我真的不知道从哪里开始调试这个。如果有人有任何建议，我将非常感激。

tldr：当开发人员工具打开时，事件监听器会附加到复选框，但并不总是会附加。这可能是造成这种情况的原因之一？

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

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

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

Answer 2

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

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

（jQuery）点击事件有时不会附加到其元素上 - 似乎与正在打开的开发人员工具

2 个答案: