Question

下面的代码我用来创建一个滑动菜单。我需要知道如何取消绑定附加到click事件的函数并在其他时间重新附加它。（使用jQuery 1.7.2）

$(document).ready(function(){
    $('.section').hide();
    $('.header').click(function(){
      if($(this).next('.section').is(':visible'))
      {
        $('.section:visible').slideUp()              
        $('.arrows:visible').attr("src","right.gif")
      }
      else
      {
        $('.section').slideUp();
        $(this).next('.section').slideToggle();
        $(this).find('.arrows').attr("src","down.gif")
    });
});

以下代码是我到目前为止的代码

$('#printVers').click(function(){
   if($('#formVersion').val() != "Print")
   {
     $('.header').unbind('click');
   }
   else
   {
     //else re-attach functionality?
   }
});

由于

Answer 1

只需创建一个命名函数。你可以在这里使用低技术，然后回到基础，解开并重新连接特定的事件。

function doStuff()
{
    if($(this).,next('.section').is(':visible'))
        ...
}

$('.header').on('click', doStuff);
$('.header').off('click', doStuff);

Answer 2

我建议你向.header添加一个简单的类，而不是解绑和重新绑定，并在click处理程序中检查类。见下文，

$('#printVers').click(function(){
   if($('#formVersion').val() != "Print")
   {
     $('.header').addClass('dontClick');
   } else  {
     $('.header').removeClass('dontClick');
   }
});

在您的.header点击处理程序

中

$('.header').click(function(){
     if ($(this).hasClass('dontClick')) {
        return false;
     }
     //rest of your code

如果你坚持使用unbind和bind，那么你可以将处理程序移动到一个函数并解除绑定/绑定该函数任何时间..

Answer 3

你可以尝试这样的事情。

$('#printVers').click(function(){
   if($('#formVersion').val() != "Print")
   {
       $('.header').addClass('clickDisabled');
   }
   else
   {
       $('.header').removeClass('clickDisabled');
   }
});

然后在点击处理程序中检查此类。

$(document).ready(function(){
    $('.section').hide();
    $('.header').click(function(){
        if(!$(this).hasClass('clickDisabled')){
            ...
            ...
        }
    });
});

Answer 4

为什么不将顶部作为一个函数，然后在你的else语句中调用它？

Answer 5

您可以尝试将变量设置为标志。 var canClick = ($('#formVersion').val() != 'Print');然后在.header元素的点击处理程序中，在执行代码之前检查canClick是否为真。

如果您仍想删除处理程序，可以将事件对象分配给变量。 var eventObj = #('.header').data('events');这将为您提供一个对象，其中包含分配给该对象的所有处理程序。要重新分配点击事件，就像$('.header').bind('click', eventObj.click[0]);

一样

Answer 6

在尝试使用bind，unbind，on，off，click，attr，removeAttr，prop之后我努力工作了。所以，我有以下场景：在我的HTML中我没有附加任何内联onclick处理程序。

然后在我的Javascript中，我使用以下内容添加内联onclick处理程序：

$(element).attr('onclick','myFunction()');

要稍后从Javascript中删除它，我使用了以下内容：

$(element).prop('onclick',null);

这是我在Javascript中以动态方式绑定和取消绑定点击事件的方式。切记不要在元素中插入任何内联的onclick处理程序。

Answer 7

您可以将.click下的所有代码放在一个单独的函数

中

function headerClick(){
  if($(this).next('.section').is(':visible'))
  {
    $('.section:visible').slideUp()              
    $('.arrows:visible').attr("src","right.gif")
  }
  else
  {
    $('.section').slideUp();
    $(this).next('.section').slideToggle();
    $(this).find('.arrows').attr("src","down.gif")
  }
}

然后像这样绑定它：

$(document).ready(function(){
    $('.section').hide();
    $('.header').click(headerClick);
});

$('#printVers').click(function(){
   if($('#formVersion').val() != "Print")
   {
       $('.header').unbind('click');
   }
   else
   {
       $('.header').click(headerClick);
   }
});

jQuery取消绑定点击事件功能并根据情况重新附加

7 个答案: