Event handling jQuery unclick() and unbind() events?

Question

I want to attach a click event to a button element and then later remove it, but I can't get unclick() or unbind() event(s) to work as expected. In the code below, the button is tan colour and the click event works.

window.onload = init; 
function init() {
    $("#startButton").css('background-color', 'beige').click(process_click);
    $("#startButton").css('background-color', 'tan').unclick();
}

How can I remove events from my elements?

Answer 1

There's no such thing as unclick(). Where did you get that from?

You can remove individual event handlers from an element by calling unbind:

$("#startButton").unbind("click", process_click);

If you want to remove all handlers, or you used an anonymous function as a handler, you can omit the second argument to unbind():

$("#startButton").unbind("click");

Answer 2

Or you could have a situation where you want to unbind the click function just after you use it, like I had to:

$('#selector').click(function(event){
    alert(1);
    $(this).unbind(event);
});

Answer 3

unbind is your friend.

$("#startButton").unbind('click')

Answer 4

Are you sure you want to unbind it? What if later on you want to bind it again, and again, and again? I don't like dynamic event-handling bind/unbind, since they tend to get out of hand, when called from different points of your code.

You may want to consider alternate options:

• change the button "disabled" property
• implement your logic inside "process_click" function

Just my 2 cents, not an universal solution.