（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）點擊事件有時不附加到它的元素 - 似乎與開發者工具被打開

回答

相關問題