jQuery.prepend添加的內容不可點擊（即使由.on觸發）

感謝您的任何幫助。這個網站是一個很好的資源。jQuery.prepend添加的內容不可點擊（即使由.on觸發）

我的問題是：當我在一個網站上打開一個菜單時，我還在（正文）前面加上一個div覆蓋層，並給它一個類，讓它可以點擊關閉菜單並刪除本身。這樣用戶可以點擊菜單外的任何地方關閉它，而不需要點擊「關閉」按鈕。這聽起來很簡單，但我無法完成它的工作。

我知道存在「綁定」問題，因爲我將內容添加到DOM，所以我使用.on（）而不是.click（），認爲這將允許我的觸發器事件綁定到新創建div。我也試過.bind（），但說實話，我只是猜測這一點，因爲我不明白它們之間的區別。我不想使用插件來實現那些看起來很簡單的事情，所以我希望我有一些容易犯的錯誤，對於那些擁有更多經驗的人，即所有人而言，這些錯誤都會立即顯現出來。 ;）這是我的jQuery函數。一切工作就像我想要的，只不過點擊「＃覆蓋」沒有任何作用。

$('.the-toggle').on("click", function(){ 
    $(".the-menu").slideToggle(); 
    $(".icon-chevron-sign-down").toggleClass("icon-rotate-180"); 

    if ($('#the-overlay').length) { 
     $('#the-overlay').remove(); 
    } 
    else { 
     var content = '<div id="the-overlay" class="the-toggle"></div>'; 
     $('body').prepend(content); 

     var docHeight = $(document).height(); 
     $("#the-overlay").height(docHeight);  
    } 
});

請原諒，如果我的問題以某種方式違反了規則。我確實在尋找一個避免重複的答案，但是我能找到的所有答案都表明我的問題可以用.on（）或不贊成的.live（）來解決。

謝謝。

來源

2013-07-08 leewaters

使用代表團語法：

$(document.body).on("click",'.the-toggle', function(){...});

來源

2013-07-08 11:55:05

完美。我想這畢竟是一個簡單的語法錯誤。我一定讀過.on（）文檔都是錯誤的。我會讓自己變得聰明起來，但是謝謝你提前給我答案。 – leewaters

-1

請在下面的代碼替換代碼。它會工作。

$(document).ready(function(e) { 
    theToggle(); 
}); 
function theToggle(){ 
    $('.the-toggle').on("click", function(){ 
     $(".the-menu").slideToggle(); 
     $(".icon-chevron-sign-down").toggleClass("icon-rotate-180"); 

     if ($('#the-overlay').length) { 
      $('#the-overlay').remove(); 
     } 
     else { 
      var content = '<div id="the-overlay" class="the-toggle"></div>'; 
      theToggle(); 
      $('body').prepend(content);    
      var docHeight = $(document).height(); 
      $("#the-overlay").height(docHeight);  
     } 
    }); 
}

來源

2013-07-08 11:59:55

jQuery.prepend添加的內容不可點擊（即使由.on觸發）

回答

相關問題