CODEWITHSUNDEEP
javascriptjquery
Lachlan McDonald
Lachlan McDonald

Reputation: 2424

Binding multiple events in jQuery

I have a custom jQuery plugin which binds a change event to a form element, in this case some input elements. The change event is used to indicate to some other components that a change has taken place.

This works as it should.

However, I've come across the need to bind an additional change event to the same input elements -- so that additional components can act on the event. I don't wish to replace the plugin's change, simply run an additional function afterwards.

Is there any way to bind multiple events in jQuery, or, what is the best method for accomplishing this?

Upvotes: 12

Views: 15434

Answers (2)

Anurag
Anurag

Reputation: 141859

You can bind multiple handlers for the same event. Bind the second change as you normally would:

​<input type="text" id="a" />​​​​​​​​​​​​​​​

​$("#a"​).change(function() { alert("1"); });
$("#a").change(function() { alert("2"); });​

$("#a").change(); // alerts 1, then 2

Upvotes: 22

cletus
cletus

Reputation: 625007

Events stack in jQuery. If you do:

<input type="button" value="Press me">

and:

$(":button").click(function() {
  alert("click");
}).click(function() {
  alert("click 2");
});

both will fire. So just bind another event to the relevant elements. It won't overwrite the first.

Upvotes: 7

Related Questions