I have two events that I want to observe on an object,

input.blur(function(event) {
  ajaxSubmit(this);
  event.preventDefault();
});

form.submit(function(event) {
  ajaxSubmit(this);
  event.preventDefault();
});

But I feel like this isn't dry enough, can I bind two events to my object input and execute my function ajaxSubmit() if either fire?

What would be super cool is if you could do:

input.bind("blur", "submit", function(event) {
  ajaxSubmit(this);
  event.preventDefault();
});

I have two events that I want to observe on an object,

input.blur(function(event) {
  ajaxSubmit(this);
  event.preventDefault();
});

form.submit(function(event) {
  ajaxSubmit(this);
  event.preventDefault();
});

But I feel like this isn't dry enough, can I bind two events to my object input and execute my function ajaxSubmit() if either fire?

What would be super cool is if you could do:

input.bind("blur", "submit", function(event) {
  ajaxSubmit(this);
  event.preventDefault();
});

• javascript
• jquery

• 1 You speak of "an object", but your sample references two objects (input and form). – Crescent Fresh Commented Dec 15, 2009 at 4:24
• yah... I didnt really make any sense there huh. but what if they were the same object? and the events made sense, like "hover" and "blur" or something? is there a simpler way to bind multiple events? – JP Silvashy Commented Dec 15, 2009 at 4:30

2 Answers 2

You can use the on method

$("#yourinput").on("blur submit", functionname);

Can bine any number of events; separate them with a space.

Yes, just declare the function and then bind it to the events:

var ajaxCallback = function(event){
  ajaxSubmit(this);
  event.preventDefault();
};

input.blur(ajaxCallback);
form.submit(ajaxCallback);

Note about variable declaration:

As @cletus points out, the way I declare the function provides a variable that is private to whichever scope it is defined in. I always program this way to minimize polluting the global namespace. However, if you are not defining both this callback and binding it to the elements in the same block of code, you should define it this way:

function ajaxCallback(event){ ... }

That way it is available wherever you later bind it using the .blur and .submit methods.