JQuery Unbind and then bind

Question

I've found lots of examples on this topic.. however, I do not fully understand. Does my logic seem correct? I have a div as button (class of .myClass) and I don't want it clickable unless myCount >= 1.

// I want to unbind if myCount == 0
if ( myCount == 0) {
 $('.myClass').unbind().css("opacity","0.5");
} else {
 // **would this rebind?**
 $('.myClass').click(callMyFunction);
}

Answer 1

You could use namespaced events, with on(). bind() has been deprecated.

var foo = function () { ... }

if (myCount)
  $('.myclass').on('click.foo', foo)
else
  $('.myclass').off('.foo')

Answer 2

click(callMyFunction) is shorthand for .bind("click", callMyFunction) or .on("click", callMyFunction).

To bind use on() to unbind use off(). Those are the preferred methods since jQuery 1.7. If you are using an older version use bind(), unbind(), or delegate() and undelegate()

$('.myClass').off('click')

and to bind

$('.myClass').on('click', function(){});

As mentioned in another post, using namespaces is an additional way to categorize your events such as click.mynamespace for example.

See this post for much more detail on the different available binding methods and which were introduced when and have replaced what and why.

Some more resources:

• click()
• unbind()
• on()
• off()

Answer 3

I'm not sure exactly what you're trying to achieve, but .unbind() removes all handlers attached to the element when called with no arguments. Therefore, $('.myClass').unbind() removes all event handlers attached to the elements with a class of .myClass. Since you only seem to be adding one event handler, click, it would be better to only unbind the click handler, like so: $('.myClass').unbind('click'). This way you won't be confused why other events are being unbinded if you add additional events later on.