Question

I’ve a 2 buttons with unique ids i.e. previousButton and nextButton with click event. I would like to enable or disable the click event on each buttons based on certain condition.

e.g.

var a=2;
var b=4
if (a!=2)
{  
   $('#previousButton').unbind('click');
}
else{
  $('#previousButton').bind('click');
}

if (b!=4)
{  
   $('#nextButton').unbind('click');
}
else{
  $('#nextButton').bind('click');
}

Then I’ve code below:

 $('#nextButton').click (function(){    //do some logic when next
button is clicked. });

$('#previousButton').click (function(){    //do some logic when
previous button is clicked });

Problem:

1. The unbind button works perfect but the bind button doesn’t work at all once it’s been unbind.

2. I tried to use but this invokes the click event everytime this condition is met. But I just want to enable the click button and wait for click event to be triggred.

$(‘#nextButton’).bind(‘click’,someHanlder);

Is there anyway this can be achieved, please?

Update

Please note I don’t want to invoke any function when bind is used. I just want to bind and make it ready for click event to be triggered. Otherwise, it invokes the function. This is what I’m after:

1. Unbind.
2. When button is clicked nothing should happen.
3. Bind (don’t want click event to fire here)
4. When button is clicked then Click event should fire..

Update
Please see JSFiddler example below where the bind handler gets invoked straight away:
http://jsfiddle.net/myagdi/MCAKL/

Answer 1

when you unbind a event from a element it removes the handler…Now if u try to bind it again you need to pass same handler again..

As you said "but this invokes the click event everytime this condition is met. But I just want to enable the click button and wait for click event to be triggred."

I don’t see this happening..

I’ve made a fiddle, in which I’ve first binded then unbinded then again binded..It behaves perfectly fine…Jsfiddle

If you don't specify any option in unbind call it removes all event handlers attached with the element, you can specify event type(In your case click) to unbind only that..You can even specify handlers to remove that way remaining handlers won't be detached..

EDIT:

According to your Problem Jsfiddle the mistake you are doing is applying parenthesis to handler…
you shouldn’t give parenthisis in handler in $('#a').bind("click", handler()); instead write $('#a').bind("click", handler); Check it now New Jsfiddle