Event listener for multiple elements - jQuery

In the ASP MVC page I'm currently working on, the values of three input fields determine the value of a fourth. Zip code, state code, and something else called a Chanel Code will determine what the value of the fourth field, called the Territory Code, will be.

I just started learning jQuery a couple weeks ago, so I would first think you could put a .change event that checks for values in the other two fields and, if they exists, call a separate method that compares the three and determines the Territory code. However, I'm wondering if there is a more elegant way to approach this since it seems like writing a lot of the same code in different places.


You can bind a callback to multiple elements by specifying multiple selectors:

$(".field1, .field2, .field3").click(function() {
    return field1 +
           field2 + 
           field3;
});

If you need to perform specific actions depending on which element was clicked, another option would be to create a function which performs the actual computation and then invoke that from each callback.

var calculate = function() {
    return field1 +
           field2 + 
           field3;
};

And then invoke this function when on each click:

$(".field1").click(function() {
    // Perform field1-specific logic
    calculate();
});

$(".field2").click(function() {
    // Perform field2-specific logic
    calculate();
});

// etc..

This means that you do not repeat yourself.

jQuery same click event for multiple elements, I normally use on instead of click . It allow me to add more events listeners to a specific function. $(document).on� Using event bubbling. Another option is to rely on event bubbling and attach the event listener on the body element. The event is always managed by the most specific element, so you can immediately check if that’s one of the elements that should handle the event:


This works for me

jQuery(document).on('scroll', ['body', window, 'html', document], 
    function(){
        console.log('multiple')
    }
);

How to add an event listener to multiple elements in JavaScript, querySelector('.my-element').addEventListener('click', event => { //handle click }). But how can you attach the same event to multiple elements? Attaching multiple elements to a single event listener in vanilla JS Let’s say you have an accordion widget on your page, and you want to show or hide the corresponding content whenever one of five different links on a page is clicked. In jQuery, these clicks are really easy to listen for:


Adding another possibility, just in cased this may help someone. This version should work on dynamically created fields.

$("#form").on('change', '#Field1, #Field2, #Field3', function (e) {        
    e.preventDefault();  

    console.log('something changed');           

});

Attaching multiple elements to a single event listener in vanilla JS , In jQuery, these clicks are really easy to listen for: $('.accordion-link').on('click', function () { // Do something }); The vanilla JS� This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.


1. Event Handling - Learning from jQuery [Book], Adding Event Handlers to Multiple Elements. Sometimes it may be useful to add event listeners to multiple elements. There are two different ways to do this: either � Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.


jQuery on() Method, Specifies that the event handler should only be attached to the specified child How to attach multiple event handlers to the selected elements using the map� Each of these elements carries around data about an event listener and its properties that can really start adding up the memory usage when you have a lot of content. Instead, what you want is a clean and fast way of handling events on multiple elements with minimal duplication and unnecessary things.


Efficiently add a click event handler to many elements in jQuery , Within an event handler, there are multiple methods to cancel event propagation, each with different semantics. event.preventDefault(). Only prevents the default� jQuery - A single click handler for multiple buttons Posted on Wed 23 May 2012 Event bubbling is a wonderful thing; in ActionScript mouse events would readily bubble up through the DisplayList all the way up to the Stage allowing you to add a single event Handler to a parent DisplayObject and then inspecting the event.target property to