CODEWITHSUNDEEP
jqueryfunctionmethodsbindunbind
BrownBe
BrownBe

Reputation: 987

bind and unbind a function jquery

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.

Upvotes: 0

Views: 687

Answers (2)

abl
abl

Reputation: 5958

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>

Upvotes: 2

Michał Perłakowski
Michał Perłakowski

Reputation: 92471

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?

Upvotes: 2

Related Questions