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><body>buttoninputdiv

このフィドルで私が何を意味するかを見てください（コンソールを確認してください）。


とが:not(.completed)バインドされているため、それらを回避するには、次のようにする必要があります。<body><html>

:not(.completed, body, html)

ただし、意図したbutton/ input/divが の下にあるtable場合、それtableもバインドされます。次の方法で回避する必要があります。

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

ご覧のとおり、これは急速に成長します。シンプルなアプローチは、セレクターを積極的に絞り込むことです。

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

あなたに合ったものは何でも。結論::not(.completed)一致しすぎます。それを絞り込みます。

于 2013-07-10T05:33:57.323 に答える
0

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 に答える