1

试图使以下工作无济于事：.remove仅当单击的内容不包含时，才使用该类淡出所有元素.completed

$(document).on('click', ':not(.completed)', function(){
    $('.remove').fadeOut('fast');
});
4

4 回答 4

2

我发现这是一个 jQuery 问题：

仅使用:not(.class)它不能正常工作。这个 jsfiddle演示了它。

如果您的.completed元素具有相同的标签名称，您可以添加tagname:not("completed")哪个有效（为什么？！）。

在我的示例中，它们是按钮，因此选择器变为button:not('.completed').

$(document).on('click', 'button:not(.completed)', function(e){
    $('.remove').fadeOut('fast');
});

JSFIDDLE

另一种解决方案是验证单击的元素是否hasClass('completed')。

if ($(e.srcElement).hasClass("completed")) { return; }

JSFIDDLE

如果所有.completed元素都是divs，则将选择器替换为div:not('completed')。

也可以在这里创建一个问题。它会得到解决。

于 2013-07-10T05:24:11.673 回答
1

on()您需要检查实际点击目标是否已完成该类，由于事件冒泡，无法使用元素过滤器完成

jQuery(function($){
    $(document).click(function(e){
        if(!$(e.target).is('.completed')){
            $('.remove').remove()
        }
    })
})

演示：小提琴

于 2013-07-10T05:10:41.113 回答
1

:not(.completed)匹配<html>，<body>以及页面上的其他所有人。

这意味着click()将绑定到每个没有类的元素.completed（包括<html>and <body>），而不仅仅是你想要的button// input。div

看看我在这个小提琴中的意思（检查控制台）。


由于:not(.completed)绑定<body>and <html>，为了避免它们，您必须：

:not(.completed, body, html)

但是，如果您的预期button//在 a 下input，那也将受到约束。你必须避免它：divtabletable

:not(.completed, body, html, table)

如您所见，这迅速增长。最简单的方法是积极缩小选择器的范围：

.clicableDivs:not(.completed) OR input:not(.completed)

什么适合你。底线：:not(.completed)匹配太多。缩小范围。

于 2013-07-10T05:33:57.323 回答
0

我有一种感觉，您需要做的是 add ev.stopPropagation()，因为这将通过 DOM 继续上升。

$(document).on('click', ':not(.completed)', function(ev){
    ev.stopPropagation();
    $('.remove').fadeOut('fast');
});

或者可能，首先检查目标是否没有.completed父母，如下所示：

$(document).on('click', function(ev){
    if ( ! $(ev.target).closest('.completed').length ) {
        ev.stopPropagation();
        $('.remove').fadeOut('fast');
    }
});

这是一个显示此工作的小提琴：http: //jsfiddle.net/C5vqw/

于 2013-07-10T05:12:44.407 回答