2014-04-04 48 views
0

我有一個工具欄,點擊注入模板。該工具欄還包含一個下拉菜單,如果用戶在下拉菜單之外點擊,該下拉菜單就會隱藏起來。要跟蹤下拉菜單外的點擊,我使用「$(document).click(function()...」。問題是document.ready上沒有下拉菜單,有什麼可以改進的地方嗎?jQuery - 如何處理可點擊的元素,還沒有加載

JS

$(document).click(function(){ 
     $('.dropdown').hide(); 
    }); 

    $('.dropdown_name').click(function(){ 
     e.stopPropagation(); 
     $('.dropdown').show(); 
    }); 
+0

執行'.dropdown_name'元素也沒有在文件準備好存在嗎? –

回答

0

查找要到已經存在於DOM點擊元素的父元素,然後用它.on。基本上它是監聽的點擊次數後代,不管他們」是否存在

$('PARENT_ELEMENT_SELECTOR').on('click','DESCENDANT_SELECTOR',function(e){ 
    //do what you want here 
}); 
-1

你可以做這樣的事情:

var dropdown = false; 
$('.dropdown_name').click(function(){ 

     e.stopPropagation(); 
     $('.dropdown').show(); 
     dropdown = true; // dropdown is now visible 

     $(document).click(function(){ 
      if(dropdown == true) 
       $('.dropdown').hide(); 
       dropdown = false; // dropdown is invisible 
     }); 

    }); 
+1

在這種情況下,在另一個事件處理程序中聲明一個事件處理程序絕對沒有什麼好的理由。每次單擊'.dropdown_name'元素時,最終都會添加更多元素。這聽起來像是一個事件代表團問題,我不明白這個代碼如何解決這個問題。 –

0

您可以在文檔中使用的on method這樣

$(document).on("click", ".dropdown_name", function(e) { 
    e.stopPropagation(); 
    $('.dropdown').show(); 
});