bind and unbind a function jquery

Question

I looking for to enable a function (and not the event) after a click function and disable the same function after another click function, for exemple :

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()
    }

});

I tried to use bind / unbind & on / off function, but I think I understand it reserved to the event (the click function) and not the callback function.

I can obviously write a second function for disable the action of foo() but I would like to know if there is a way to achieve this with optimization.

score 2 · Answer 1 · edited May 23 '17 at 12:13

I would rewrite the code in such way:

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);
  }
});

See also: How do I unbind "hover" in jQuery?

score 2 · Accepted Answer · answered Dec 12 '15 at 13:44

There are solutions that do not require binding and unbinding handlers all the time.

Solution 1: use a flag to determine whether the handler should do something or not, such as:

(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>

Solution 2: use a class instead of a flag:

$(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>

Solution 3: in the particular case where the function you want to enable/disable only affects the styling of the element, you can omit the function altogether and use CSS instead:

$(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>

the second solution seems to be what I'm looking for in this case. Thank you. But no way to "disable" ok "kill" a function ? — BrownBe, Dec 12 '15 at 14:03
@BrownBe You can "disable" a function by setting a flag to false and checking for that flag inside the function. This is what solution 1 does. Of course you're not really disabling the function, you're just changing its behaviour, and that solution requires modifying the function itself. If you don't have access to the function internals you will have to `unbind` it as shown in Gothdo's answer. — abl, Dec 12 '15 at 14:14

bind and unbind a function jquery

2 Answers2