绑定和取消绑定函数 jquery

Question

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

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() 的操作，但我想知道是否有一种方法可以通过优化来实现。

Answer 1

我会这样重写代码：

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?

Answer 2

有些解决方案并不总是需要绑定和解除绑定处理程序。

解决方案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： 使用 class 而不是标志：

$(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： 在特定情况下，您想要 enable/disable 的功能仅影响元素的样式，您可以完全省略该功能并使用 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>

绑定和取消绑定函数 jquery

bind and unbind a function jquery

methods

jquery

bind

function

unbind