（jQuery）点击事件有时不附加到它的元素 - 似乎与开发者工具被打开

-1

我一直在试图找到一个问题的来源现在几个小时，并且我开始认为我的bug受到影响从观察者的效果！（jQuery）点击事件有时不附加到它的元素 - 似乎与开发者工具被打开

总结：

有复选框，我的网页上
一旦整个页面加载完成后，附加一个侦听每个复选框

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

这是一个非常直接的佛rward任务（或者我认为，无论如何）。我的问题来自于仅在某些时间被监听的点击事件。

这里是它不工作的情况下：

浏览过该网站的页面复选框
与开发工具检查复选框元素
检查“事件监听器”标签
我下点击根

这里不会出现元素的情况下它的工作

开放开发工具
浏览过该网站的页面复选框
检查“事件监听器”选项卡
我的元素并下点击根

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

但是，在我过去一小时所做的所有测试中，当页面已加载或打开时，“开发工具”窗口刷新后，监听器已连接。这导致我相信这是某种加载顺序问题？我真的不知道该在哪里开始调试。如果有人有任何建议，将非常感激。

tldr：事件监听器越来越重视到复选框时开发工具是开放的，但并不总是越来越重视，否则。发生这种情况的原因是什么？

注：我使用谷歌浏览器

来源

2017-11-17 pickle

基础上提供，我建议重构这是硬编码字典中的代码和每个循环似乎狡猾和我奇怪的。

为什么不能有这样的事情？这也使你的代码可测试，并更容易调试使用控制台，你是在你的问题标记谷歌开发工具等。

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

我不测试/运行这个代码即时输入一个粗略的想法，快速帮助。

来源

2017-11-17 21:38:35 Harry

非常感谢。我会尝试一些类似的东西，并让你知道它是否有效。 – pickle

大声笑也因为你是硬编码词典为什么不废止所有的代码，只是绑定事件到你想要直接的div？ $（''＃checkbox1）.on（'click'，function（）{myFunction（“div.div1”）;}）; $（''＃checkbox2）.on（'click'，function（）{myFunction “div.div2”）;}）; hehe如果你只是绑定这么几个项目，为什么你需要这个代码？ – Harry

我只给了几个项目用于这个问题的目的。有两个以上的键值对。它是通过迭代设置的，以避免代码重复。 – pickle

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

当我删除此外部库时，代码的行为如预期。

来源

2017-11-21 14:51:14 pickle

（jQuery）点击事件有时不附加到它的元素 - 似乎与开发者工具被打开

回答

相关问题