jquery 点击每个元素，但答案

【问题标题】：jquery on click every element butjquery 点击每个元素，但
【发布时间】：2013-02-07 12:19:37
【问题描述】：

当点击页面上除元素及其子元素之外的任何内容时，我试图从点击的元素中删除 active 类。

我知道我没有正确使用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');

【问题讨论】：

托马斯，再多 1 个代表点！
@75inchpianist 不再是 ;) 我不得不把这一切都搞砸了
在选择器之前不需要 $ 来告诉它的 jquery
@75inchpianist 哈哈，是的！
@75inchpianist 我对$ 的确切位置和位置有点困惑.. :/

标签： jquery jquery-selectors

【解决方案1】：

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 中提出其他“单击其他任何地方以取消”类型区域时，您可能会想要添加它。

【讨论】：

【解决方案2】：

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

【讨论】：