0

bind/live他が行われたときにクリックイベントをしようとしています。だから私はとを使用.on()して.off()います。行動する方法は、

  1. a.nav-linkdivが表示されるをクリックすると、
  2. clickイベントをドキュメントに固定すると、
  3. クリックイベントをバインドし、HTML内の任意の場所をクリックすると、divを閉じてドキュメントの動作をoff（）します。

今では1ラウンドは正常に動作しますが、次にクリックするa.nav-linkと、すべてのタスクが一度に実行されるので、ここで何をしているのでしょうか。

デモ： http： //jsfiddle.net/xHNQ3/1/

<div id="container">
    <header>
        <div class="nav">
            <a href="#" id="nav-link">click me</a>
        </div>
        <div class="sub-nav"></div>
    </header>
</div>​



    $('#nav-link').on('click', bindOnClick);


     function bindOnClick() {
         $('.nav').addClass('isVisible');
         $('.sub-nav').show(function(){
             $(document).on('click', 'html', function(){
                 alert('done');
                 $('.sub-nav').hide();

                 $(document).off('click', 'html', bindOnClick);
             });
         });
     }

編集：私がここでやろうとしていることは、基本的に、2つのdivの外側をクリックするたびに、表示されるdiv.sub-navが非表示になることです。

4

3 に答える 3

1

この行はあなたの問題でbindonclickあり、ドキュメントのクリックではなく、リンクに関連付けられています。

$(document).off('click', 'html', bindOnClick);

http://jsfiddle.net/xHNQ3/4/

$(document).off('click', 'html');

リンクのクリックでイベントが 2 回発生するのを防ぎたい場合は、これもオフ/オンにします。

http://jsfiddle.net/xHNQ3/9/

$('#nav-link').on('click', bindOnClick);


function bindOnClick(e) {
    $('#nav-link').off('click', bindOnClick);
    $('.nav').addClass('isVisible');
    $('.sub-nav').show(function() {
        $(document).on('click', 'html', function() {
            alert('done');
            $('.sub-nav').hide();

            $(document).off('click', 'html');
            $('#nav-link').on('click', bindOnClick);
        });
    });
}​
于 2012-05-16T21:26:21.820 に答える
1

実際には$(document)クリック ハンドラのバインドを解除していません。ハンドラーは現在、無名関数です。

にバインドされた関数を渡す必要があり$.fn.onます$.fn.off。下記参照。

 $('#nav-link').on('click', bindOnClick);

 function bindOnClick() {
     $('.nav').addClass('isVisible');
     $('.sub-nav').show(function(){
         $(document).on('click', 'html', hideAndUnbind); // bind named function
     });
 }

 function hideAndUnbind() {
     alert('done');
     $('.sub-nav').hide();
     $(document).off('click', 'html', hideAndUnbind); // unbind named function
 }

補足: ドキュメントのすべてのクリック イベントをキャプチャする場合は、セレクターを削除できます。$(document).on('click', hideAndUnbind);同じように動作するはずです。

ただし、イベントのバインドとバインド解除を常に行わない方がよい場合があります。代わりに、このようなことができます。http://jsfiddle.net/xHNQ3/11/

$('#nav-link').on('click', function(){
    $('.nav').addClass('isVisible');
    $('.sub-nav').show();
    return false; // to prevent bubbling up to the document element
});

$(document).on('click', function(){
    if ($('.nav').hasClass('isVisible')) {
        $('.nav').removeClass('isVisible');
        $('.sub-nav').hide();
    }
});
于 2012-05-16T21:31:28.157 に答える
0

ここで何htmlをすべきですか？2 番目の引数は、セレクターにする必要があります。

$(document).on('click', 'html', fn);

これは、次のように言うのと同じです:

$("html").live("click", fn);
于 2012-05-16T21:22:50.407 に答える