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

jQuery unbind click event function and re-attach depending on situation

提问by Mark Walters

The code below I use to create a sliding menu. I need to know how to unbind the function attached to the click event and re-attach it some other time. (using jQuery 1.7.2)

下面的代码我用来创建一个滑动菜单。我需要知道如何解除绑定到单击事件的函数并在其他时间重新附加它。（使用 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")
    });
});

The code below is what I have so far

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

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

Thanks

谢谢

回答by Tejs

Simply make a named function. You can go low tech here and back to basics to unbind and reattach specific events.

只需创建一个命名函数。您可以在这里使用低技术并返回基础以解除绑定和重新附加特定事件。

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

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

回答by Selvakumar Arumugam

Instead of unbind and re-bind, I suggest you to add a simple class to .headerand check for the class in the click handler. See below,

我建议您添加一个简单的类.header并在单击处理程序中检查该类，而不是取消绑定和重新绑定。见下文，

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

And in your .headerclick handler,

在您的.header点击处理程序中，

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

If you insist on having a unbind and bind, then you can move the handler to a function and unbind/bind the function any number of time..

如果您坚持要取消绑定和绑定，那么您可以将处理程序移动到一个函数并取消绑定/绑定该函数任意次数..

回答by ShankarSangoli

You can try something like this.

你可以尝试这样的事情。

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

And then in the click handler check for this class.

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

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

回答by hradac

You could try setting a variable as a flag. var canClick = ($('#formVersion').val() != 'Print');Then in the click handler for your .headerelements check to see if canClickis true before executing your code.

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

If you still want to remove the handler you can assign the events object to a variable. var eventObj = #('.header').data('events');That will give you an object with all the handlers assigned to that object. To reassign the click event it would be like $('.header').bind('click', eventObj.click[0]);

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

回答by bboydflo

After trying so hard with bind, unbind, on, off, click, attr, removeAttr, prop I made it work. So, I have the following scenario: In my html i have NOT attached any inline onclick handlers.

在使用绑定、解除绑定、打开、关闭、单击、属性、removeAttr、prop 如此努力之后，我让它工作了。所以，我有以下场景：在我的 html 中，我没有附加任何内联 onclick 处理程序。

Then in my Javascript i used the following to add an inline onclick handler:

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

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

To remove this at a later point from Javascript I used the following:

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

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

This is the way it worked for me to bind and unbind click events dinamically in Javascript. Remember NOT to insert any inline onclick handler in your elements.

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

回答by Adam Sweeney

Why not make that top section a function, and then call it in your else statement?

为什么不把上面的部分变成一个函数，然后在你的 else 语句中调用它呢？

回答by DangerMonkey

You could put all the code under the .clickin a separated function

您可以将所有代码.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")
  }
}

and then bind it like this:

然后像这样绑定它：

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

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