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

Answer 1

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

Answer 2

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()

Answer 3

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
}