jQuery multiple events to trigger the same function

Is there a way to have keyup, keypress, blur, and change events call the same function in one line or do I have to do them separately?

The problem I have is that I need to validate some data with a db lookup and would like to make sure validation is not missed in any case, whether it is typed or pasted into the box.

You can use .on() to bind a function to multiple events:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Or just pass the function as the parameter to normal event functions:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

How to trigger the same function with jQuery multiple events?, To trigger the same function with multiple events, use the jQuery on() method with multiple events such as click, dblclick, mouse enter, mouse leave, hover, etc. jQueryWeb DevelopmentFront End Technology. To trigger the same function with multiple events, use the jQuery on() method with multiple events such as click, dblclick, mouse enter, mouse leave, hover, etc. Example. You can try to run the following code to learn how to work the same function with jQuery multiple events: Live Demo.

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

Handling Events, jQuery provides a method .on() to respond to any event on the selected elements. Bind multiple events and multiple handlers to the selected elements Suppose you want to trigger the same event whenever the mouse� Below is the jQuery code structure which shows you how to trigger or call just one function with multiple events: $('#my_element').on('keyup keypress change', function(e) { // Your code goes here }); On the above code, you can see how we have trigger one function with three events that are keyup, keypress and change event. Inside the on() method, in the first parameter, we put multiple event names separated by space. The same function will be called every time one of these three events will

I was looking for a way to get the event type when jQuery listens for several events at once, and Google put me here.

So, for those interested, event.type is my answer :

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

More info in the jQuery doc.

.bind(), A function to execute each time the event is triggered. As of jQuery 1.4 we can bind multiple event handlers simultaneously by passing an object of event� jQuery multiple events to trigger the same function (the second event include specific element) I have to trigger a function on 2 events. The first event is keyup (I know how to trigger this). The second event is click on a specific button.

You can use bind method to attach function to several events. Just pass the event names and the handler function as in this code:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Another option is to use chaining support of jquery api.

jQuery Event Basics, These events are often triggered by the end user's interaction with the If multiple events are to share the same handling function, you can� functions - jQuery multiple events to trigger the same function jquery same function for multiple elements (7) Is there a way to have keyup , keypress , blur , and change events call the same function in one line or do I have to do them separately?

If you attach the same event handler to several events, you often run into the issue of more than one of them firing at once (e.g. user presses tab after editing; keydown, change, and blur might all fire).

It sounds like what you actually want is something like this:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

jQuery on() Method, As of jQuery version 1.7, the on() method is the new replacement for the bind(), How to attach multiple event handlers to the selected elements using the map� jquery multiple ids same function. Ask Question Asked 8 years, 10 months ago. Active 3 years, 7 months ago. jQuery multiple events to trigger the same function.

jQuery multiple events to trigger same function, How to trigger the same function with multiple events in jQuery? jQuery on() method can be used to call a function with more than one event. jQuery multiple events to trigger the same function. 1287. 1076. Is Safari on iOS 6 caching $.ajax results? 298. jQuery click events firing multiple times. 1409.

jQuery multiple events to trigger the same function � GitHub, You can use .on() to bind a function to multiple events: $('#element').on('keyup keypress blur change', function(e) { // e.type is the type of event fired });. If you want multiple instances with the same identifier you should be using class attributes so instead of having . id="next" you should have. class="next" then just use the class selector as in $(".next").click( function() { }); and it should work for all of them

.trigger( "multiple events triggering" ) � Issue #2753 � jquery/jquery , But not this : $( "body" ).trigger( "mousedown touchstart" ); We have to call .trigger where you'd want to trigger several events with the same event object? function() { // Write the events: jqElement.on( { eventA: function() {}� The .one () method is especially useful if you need to do some complicated setup the first time an element is clicked, but not subsequent times. .one () accepts the same arguments as .on () which means it supports multiple events to one or multiple handlers, passing custom data and event delegation.

Comments
  • With space separated events how do you also include name spacing? .on('keyup.foo keypress.foo blur.foo change.foo', …) or .on('keyup keypress blur change .foo', …)?
  • Problem with this is that myFunction will probably get called multiple times, which you might want to prevent.
  • How can I pass parameter in this function?
  • @Esger Anyway to do this? In mobile, I always need to on('click tap', e => {...}). The listener may be triggered twice, I just wanna trigger once, how can I code in the listener function?
  • @Tomlsion Maybe add a className 'busy' to the element in the called function, and then $('#element:not(.busy)').on('keyup keypress blur change', function(e){…}); Finally remove the className 'busy'.
  • This is done for a delegated event, it will work, but it's not the simplest way of doing it, nor the most efficient.
  • Event delegation is important, and may (or may not) be required depending on when the script is loaded / run, and if the elements exist in the DOM at the time the script is loaded / run.
  • As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
  • Generally you should explain your answer. Simply pasting code does nothing to help the OP understand their problem or your solution.
  • what if I need first argument in jquery event subscriber function (event)? How to use it?
  • That's ok, you can just declare the function with the event parameter and then access it from within the method. These events will pass the object in themselves. I hope this helps. var foo = function(event) { console.log(event); } $('#selector').on('keyup keypress blur change paste cut', foo);