Creating multiple event listeners using a loop

Question

Trying to create multiple listeners with a loop. How to make it work?

var buttons = ['one', 'two', 'tree'];
$.each(keys, function(key, value) {
    $(value).click(function() {
        // do something
    });
});

Also, is there a shortcut to not writing key, value when I only need the value?

Answer 1

You are better off putting a delegated event listener on a parent instead of iterating through every button. For example, if you place all your <button> elements inside of a <div> with the id #container, then you can write your listener like this:

$('#container').on('click', 'button', function() {
  // do something;
});

Now, every time a button element is clicked within that div, your callback will be invoked. You can also use a class selector in place of 'button' to only listen to elements that have that class.

Answer 2

If you want to make it work by looping then you can use

var buttons = ['.one', '.two', '.three'];

// ---------------- with -------- $.each();

$.each( buttons, function(key, value) {
    $(value).click(function() {
        // ------------- Do something
    });
});


// ------------------ with ----------- for loop


for( var i=0 ; i < buttons.length ; i++ )
{
    $(buttons[i]).click(function({
    // ------------- Do something
    });
}

But why to go this round if just want to assign event

$('.one, .two, .three, #one, #two, #three').click(function() {
     // ------------- Do something
});

OR if having variable

var buttons = '.one, .two, .three, #one, #two, #three';
$(buttons).click(function() {
     // ------------- Do something
});

AND THATS IT no key, no value, no for, no each