绑定和取消绑定函数 jquery答案

【问题标题】：bind and unbind a function jquery绑定和取消绑定函数 jquery
【发布时间】：2015-12-12 12:48:39
【问题描述】：

我希望在单击功能后启用一个功能（而不是事件）并在另一个单击功能后禁用相同的功能，例如：

function foo () {

    $('#bg').hover(function() {
        $(this).css('background','red');
    }, function(event) {
        $(this).css('background','green');

});


$('#button').click(function(){ 

    if (!$(#button).hasClass('active')) { 
        foo(); // enable foo
    } else {
        ??? // I would like to disable foo()
    }

});

我尝试使用绑定/取消绑定和开/关功能，但我想我理解它保留给事件（点击函数）而不是回调函数。

我显然可以编写第二个函数来禁用foo() 的操作，但我想知道是否有办法通过优化来实现这一点。

【问题讨论】：

标签： jquery function methods bind unbind

【解决方案1】：

有些解决方案不需要始终绑定和取消绑定处理程序。

解决方案一：使用一个标志来确定处理程序是否应该做某事，例如：

(function(){
  
  var hoveringEnabled = false;    
  
  $(function(){

    $("#button").click(function(){
      hoveringEnabled = !hoveringEnabled;
    });

    $('#bg').hover(function() {
       if(hoveringEnabled){
         // Do things...
         $(this).css('background','red');
       }
    }, function(event) {
      if(hoveringEnabled){
        // Do other things...
        $(this).css('background','green');
      }
    });

  });
}());

#bg {
  width: 200px;
  height: 150px;
  background-color:green;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<button id="button">Click me</button>
<div id="bg">Hover me</div>

解决方案 2： 使用类而不是标志：

$(function(){

  var $bg = $("#bg");

  $("#button").click(function(){
    $bg.toggleClass("hoveringEnabled");
  });

  $(document).on('mouseenter', '#bg.hoveringEnabled', function() {
    // Do things...
    $bg.css('background','red');
  });
  $(document).on('mouseleave', '#bg.hoveringEnabled', function() {
    // Do other things...
    $bg.css('background','green');
  });

});

#bg {
  width: 200px;
  height: 150px;
  background-color:green;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<button id="button">Click me</button>
<div id="bg">Hover me</div>

解决方案 3： 在您要启用/禁用的功能仅影响元素样式的特定情况下，您可以完全省略该功能并使用 CSS 代替：

$(function(){
  $("#button").click(function(){
    $("#bg").toggleClass("hoveringEnabled");
  });
});

#bg {
  width: 200px;
  height: 150px;
  background-color:green;
}

#bg.hoveringEnabled:hover {
  background-color:red;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<button id="button">Click me</button>
<div id="bg">Hover me</div>

【讨论】：

第二种解决方案似乎是我在这种情况下要寻找的。谢谢你。但是没有办法“禁用”好的“杀死”一个功能？
@BrownBe 您可以通过将标志设置为 false 并检查函数内部的标志来“禁用”函数。这就是解决方案 1 所做的。当然，您并没有真正禁用该功能，您只是在更改其行为，而该解决方案需要修改该功能本身。如果您无权访问函数内部，则必须 unbind 它，如 Gothdo 的答案所示。

【解决方案2】：

我会这样重写代码：

function fooMouseEnter() {
  $(this).css('background','red');
}
function fooMouseLeave() {
  $(this).css('background','green');
}
$("#button").click(function() {
  if (!$("#button").hasClass('active')) {
    foo
      .on("mouseenter", fooMouseEnter)
      .on("mouseleave", fooMouseLeave);
  } else {
    foo
      .unbind("mouseenter", fooMouseEnter)
      .unbind("mouseleave", fooMouseLeave);
  }
});

另请参阅：How do I unbind "hover" in jQuery?

【讨论】：