0

bind/live当另一个完成时，我正在尝试单击事件。所以我正在使用.on()and .off()。假设采取行动的方式是，当

  1. 我点击a.nav-link一个 div 出现，
  2. 当它发生时，我将click事件固定到文档中，
  3. 它绑定了一个单击事件，当我单击 html 中的任何位置时，它会关闭 div 并关闭（）文档行为

现在它可以正常运行一轮，但是下次我单击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);
             });
         });
     }

编辑：我在这里要做的基本上是，每当我在两个 div 之外单击时，显示的那个.sub-nav应该隐藏。

4

3 回答 3

1

这条线是你的问题，bindonclick与链接相关，而不是与文档点击有关。

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

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

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

如果您想防止单击链接导致双重事件触发，那么也将其关闭/打开。

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.onto绑定的函数$.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应该做什么？第二个参数应该是您的选择器。

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

这相当于说：

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