overriding previously-bound click events

When I use this code with an element whose id is "foobar":

$("#foobar").click(function () { alert("first"); });
$("#foobar").click(function () { alert("second"); });

I get two ale开发者_如何学运维rts: "first" and "second" second.

How do I specify a click event that also clears out any previous click events attached to the element? I want the last $("#foobar").click(...) to erase any previously bound events.

---

You can unbind the events already attached to that element, and then attach the second event handler, so it will be the only one (note the unbind method).

$("#foobar").unbind("click").click(function() { alert("second"); });

---

$("#foobar").click(function () { alert("first"); });
$("#foobar").unbind('click').click(function () { alert("second"); });

Notice the unbind() method. It does exactly what it sounds like.