Attaching unique click events to each Repeated instance of an Array JS

Question

Here is an example of three forms with the same repeated instance and no unique identifier:

<form action="/haters"><input type="submit" value="stop hatin"></form>
<form action="/haters"><input type="submit" value="stop hatin"></form>
<form action="/haters"><input type="submit" value="stop hatin"></form>

How can I attach a different console.log or any message triggered by a click to each of these buttons?

I am targeting these buttons so far with a jQuery Dom selector $("form[action='/haters']")

I posted on codepen also: http://codepen.io/marc313/pen/uphiv

when I target these elements in the DOM it is an array of each instance. Think click the first button, console.log('click 1st button'); click the second button, console.log('click 2nd button'); and so on. — Nice-Guy
– Nice-Guy, Commented Dec 13, 2013 at 1:08

Community · Accepted Answer · 2017-05-23 11:44:49Z

While you could bind to each button individually, as in @Deryck's answer, often times such practice leads to duplicate code. Its likely your actual use case isn't to log 3 different things to the console when 3 buttons are clicked.

Particularly if these 3 buttons do similar actions or if they act on the same set of data, its often much more clean to do something like this:

jQuery

$('document').on('click', 'form[action=haters]', function() {
    /* This event will fire for any form with action="haters"
     * that is on your page. */

    var $clickedElement = $(this); // jQuery collection of the clicked element

   /* If you slightly modify your markup, as in the example below, you can
    * quickly uniquely identify each button, and act accordingly, like so: */

    var id = $clickedElement.attr('data-id');

    if(id === 1) {
        stuffForFirstButton();
    } else if(id === 2) {
        stuffForSecondButton();
    } else if(id === 3) {
        stuffForThirdButton();
    }
});

Markup

<form action="/haters"><input type="submit" value="stop hatin" data-id="1"></form>
<form action="/haters"><input type="submit" value="stop hatin" data-id="2"></form>
<form action="/haters"><input type="submit" value="stop hatin" data-id="3"></form>

Reference

On calling .on() for event binding

Deryck · Accepted Answer · 2013-12-13 01:13:14Z

Each item in a set will have an index number and you can use that to identify them.

jQuery:

$('input[type=submit]').eq(0).on('click', function() {
    console.log('This is unique to the FIRST submit button');
});
$('input[type=submit]').eq(1).on('click', function() {
    console.log('This is unique to the SECOND submit button');
});    
$('input[type=submit]').eq(2).on('click', function() {
    console.log('This is unique to the THIRD submit button');
});

The .eq() method means "equals" and refers to the index number for the selector you chose in $('input[type=submit']).

If you want to do that systemically, you can put that into a for() or while() loop. Of course, you would replace eq(0) with whatever number you want to use to identify the button (starting from 0 being the first element in the set, not greater than $('input[type=submit]').length).

Here's a fork of your CodePen to see it in action with alert()

Michal Olszowski · Accepted Answer · 2013-12-13 01:14:46Z

0

I think the best way for that is adding names to this inputs and later you can grab each input by a name and using click function for each.

<input type="submit" value="stop hatin" name="first">

$("#first").click(function() {
function
}

answered Dec 13, 2013 at 1:14

Michal Olszowski

8051 gold badge9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Attaching unique click events to each Repeated instance of an Array JS

3 Answers 3

jQuery

Markup

Comments

jQuery:

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

jQuery

Markup

Comments

jQuery:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related