2013-02-22 102 views
2

我試圖刪除點擊元素和它的子元素之外的頁面上的任何內容時點擊元素active類。jquery點擊每一個元素,但

我知道我沒有正確使用not()選擇器,但這是我最好的猜測。我也不知道如何將部分添加有關兒童(?)

$(document).ready(function() { 
    $('#content_container').on('click', '.wrapper-dropdown-1', function() { 
     //close all open dropdowns 
     $('.wrapper-dropdown-1').not(this).removeClass('active'); 


     //close dropdown if anywhere on the body is clicked 
     $('body').on('click', ('#content_container').not(this), function() { 
      $(this).removeClass('active'); 
     }); 
     //Uncaught TypeError: Object #content_container has no method 'not' 


     var dropdown = $(this); 
     dropdown.toggleClass('active'); 
    }); 
}); 

//Uncaught TypeError: Object #content_container has no method 'not' 

我不明白這一點,在第四行此成功實施之間的差異。

$('.wrapper-dropdown-1').not(this).removeClass('active'); 
+2

托馬斯,僅有1個代表點! – 75inchpianist 2013-02-22 00:20:51

+0

@ 75inchpianist不再有;)我不得不把它全部搞亂 – 2013-02-22 00:22:10

+0

你不需要在選擇器之前告訴它的jquery – 75inchpianist 2013-02-22 00:22:15

回答

0
var dropdown; 

$('body').on('click', function() { 
    if ($(e.target).closest(dropdown).length) return; 
    $('.wrapper-dropdown-1').removeClass('active'); 
}); 

$('#content_container').on('click', '.wrapper-dropdown-1', function() { 
    $('.wrapper-dropdown-1').not(this).removeClass('active'); 
    dropdown = $(this).toggleClass('active'); 
}); 

通知使用$(e.target)(原始事件元件)代替的$(this)(這將總是body)。

它是這個樣子的原因是,如果你試圖在on事件過濾器使用:not樣式選擇,你防止事件觸發該區域中的元素,卻沒有考慮區域的父母。具有not的事件處理程序不會停止事件的傳播,只會包含在選擇中。 (停止捕獲區域內的事件傳播是另一種方法,但是隨着應用程序變得越來越複雜,所以我不推薦它。)

您還聲明瞭一個事件處理程序在另一個事件處理器中這還有其他問題,比如每次點擊該區域時,您都會在body上獲得多個處理程序。您可以想象地命名事件處理程序並手動綁定和解除綁定,但只是讓該處理程序始終運行可能更容易。當你在前進的UI中想出其他「點擊取消」類型區域時,你會想要添加它。

0

jsBin

$('#content_container').on('click', '.wrapper-dropdown-1', function(evt){ 
    $(this).toggleClass('active'); 
}); 

$('body').click(function(evt){ 
    var el = $(evt.target).is('.wrapper-dropdown-1') ? evt.target : null; 
    $('#content_container .wrapper-dropdown-1').not(el).removeClass('active'); 
});