Question

I’ve a super simple id tag which has click event. I’ve used JQuery unbind to disable the click for certain scenarios and when I try to bind again with code below the click event never gets fired.

disableButton()
{
    $('#id1').unbind('click');
}
        .......
enableButton()
{
    $('#id1').bind('click');
}

Click handler looks like below:

$("#id1").click(function () {
    //apply some complex front end business rules
}

Could someone please help me with what I’m doing right/wrong?

I just want to enable or disable the click, is there easier way to achieve this?

UPDATE:

From what I understand both bind and on requires a call back function which gets executed. This is going to be an issue for my case as I don’t want to execute the click event but just enable the click event and ready for click to happen.

Isn’t it possible to just to disable and enable click event without having to pass call back functions?

Answer 1

declare first the function:

function clickFunction(){
//your code here, to be execute on click
}  

when you need it, bind the click function on the click-event

$('#id1' ).on("click", clickFunction())

and unbind with off later:

$('#id1' ).off("click", clickFunction())

when you want to bind it once again: $('#id1' ).on("click", clickFunction())