Jquery: event listener for array of elements

Question

I am populating an array with elements using the .each() method and $(this) selector.

(function($){

    var elements = new Array();
    var index = 0;
    $("img").each(function() {
        if($(this).attr("attribute")){
            $(this).attr("imageIndex", index);
            elements[index] = $(this);
            index++;
        }
    });

}(jQuery));

I would like to add an event listener to my code that is executed when any element in that array is clicked.

For example:

$(elements).click = function(){
    console.log("success");
}

I suppose the onclick attribute could be changed as each image is looped through, but this seems somewhat inconcise. I would like to be certain that that is my last resort before I implement it.

jQuery already creates an array of elements when you do $(selector) — charlietfl
– charlietfl, Commented Dec 25, 2013 at 3:30
@cinderblock it can be accessed by using attribute selectors... see my answer below — Arun P Johny
– Arun P Johny, Commented Dec 25, 2013 at 3:32

Jpsy · Accepted Answer · 2017-05-18 08:13:10Z

5

Use jQuery's map function to join your array elements into a single combined jQuery object.
Then attach jQuery events to this object (using "on()" in this example).

var elements = [$('#blah'), $('#blup'), $('#gaga')];  //basically what you are starting with

var combiObj = $.map(elements, function(el){return el.get()});
$(combiObj).on('click', function(ev){
	console.log('EVENT TRIGGERED');
});

button{
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="blah">Button blah</button>
<button id="blup">Button blup</button>
<button id="gaga">Button gaga</button>

edited May 18, 2017 at 8:13

answered May 17, 2017 at 18:06

Jpsy

21.1k7 gold badges123 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-12-25 03:28:38Z

4

There is no need of an array, you can use the element selector along with has attribute selector to get all image elements with the given attribute, then use .click() to register the event handler

$("img[attribute]").click(function(){
    //do your stuff
})

answered Dec 25, 2013 at 3:28

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

user1890615 Over a year ago

Sorry, but I should have also added that I want to add an index attribute to the element according to how many images are before it. I will edit my question.

Arun P Johny Over a year ago

@cinderblock how do you want the index as a attribute... or some other reference

user1890615 Over a year ago

That's terrific! Thank you!

brandonscript · Accepted Answer · 2013-12-25 03:28:31Z

0

Use a comma separated list of selectors, wrapped in quotes like so:

$('#id, .selector, .somethingElse').click(function() {
    //your handler
});

answered Dec 25, 2013 at 3:28

brandonscript

73.7k35 gold badges178 silver badges240 bronze badges

Comments

Girish · Accepted Answer · 2013-12-25 03:37:23Z

0

There not required to store Objects in array, you can get current event this way

<script type="text/javascript">
     $(function(){
        $("img").bind("click", function(Event){
            console.log(Event.target);
         });
     })
</script>

when you click on any image element, you will get current event target inside function "Event.target" or you can use also this way $(Event.target).fun({...});

answered Dec 25, 2013 at 3:37

Girish

12.1k3 gold badges37 silver badges54 bronze badges

Comments

isaacsan 123 · Accepted Answer · 2020-05-26 19:56:41Z

I would've just added a comment on what Girish said, but since I don't have enough reputation yet, here's my addition to Girish's answer.

I just want to add that if you want to add an event listener to an array of buttons, with each button having an image in it, just using Event.target to access the buttons might cause a problem, because the image inside the button may become the event target if the image is clicked on. Try clicking on the image and around the image in the snippet below. When the image is clicked on, the event target is the image, not the button.

Check it out:

$('button').click(e => $('#eventTarget').text(e.target));

/*just random styling to make things a little clearer. not important*/
button {
  padding: 20px;
}
button img {
  height: 50px;
}
div {
  padding: 20px;
  background: #eee;
  margin-top: 10px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
 <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-trash-can-1.png" alt="">
</button>

<div id="eventTarget"></div>

To circumvent this, remove all pointer events from the image within the button, so that only the button can be the event target.

Use this CSS to avoid the above issue:

button img {
  pointer-events: none;
}

Collectives™ on Stack Overflow

Jquery: event listener for array of elements

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related