Jquery: event listener for array of elements

Admin 1
Viewed 9998

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.

arrays jquery javascript
5 Answers

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;
}
user_118579060
Related