-2

Is it possible to write a JQUERY event that if any image is clicked on, a message box gets displayed. Or does every image have to have its own event to activate. I know how to specific images but is it possible to have one JQUERY for all images?

MiscellaneousUser
  • 2,915
  • 4
  • 25
  • 44

4 Answers4

1

Use generic html tag in jquery selector, like:

$("img").click(function() {
  //DoForAllImgs();
});
Mathiasfc
  • 1,627
  • 1
  • 16
  • 24
0

Yes.you can trigger by tag name like

$('img').on('click',function(){
alert($(this).attr('src'));
//alert('any one image clicked');
});
lalithkumar
  • 3,480
  • 4
  • 24
  • 40
0

You can use event delegation thus event will be added to one element and delegated to decendent image children

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).on('click','img',function(){
   //Your handler
});

Instead of document you may use any container inside which you want to delegate click event on image.

This technique will fire click event on dynamically add image also.

Nadir Laskar
  • 4,012
  • 2
  • 16
  • 33
  • There is no benefit to doing it this way. In fact it's going to be less efficent as it now needs to listen for **all** click events on the document, then filter them, `$("img").click` filter before listening – Liam Jun 02 '17 at 13:12
  • @Liam you can narrow it down to more specific container of images – Nadir Laskar Jun 02 '17 at 13:13
  • Yes you can, but what's the point. `$('img').click` is the correct answer here – Liam Jun 02 '17 at 13:14
  • @Liam what if image are dynamically added to dom – Nadir Laskar Jun 02 '17 at 13:14
  • The OP has not said this. Your just gold plating now, [YNGNI](https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it) – Liam Jun 02 '17 at 13:15
  • The question was "any image is clicked on", which doesn't make it clear if it also includes images added dynamically. In that case event delegation is the most elegant solution in my opinion. Also, performance-wise event delegation is to be [preferred in many cases](https://stackoverflow.com/questions/8827430/event-delegation-vs-direct-binding-when-adding-complex-elements-to-a-page). – Strille Jun 02 '17 at 13:16
  • @Liam You may also be wrong about the question. It was also not mentioned the other way. – Nadir Laskar Jun 02 '17 at 13:18
-1

You can place a listener on the whole document and specify a selector, in this case 'img':

$(document).on('click', 'img', function (e) {
    console.log('click');
});

This will make any current or future img that is inserted into the DOM clickable.

Strille
  • 5,741
  • 2
  • 26
  • 40
  • See [my comment on the other answer](https://stackoverflow.com/a/44329811/542251), this is less efficent than a standard click event – Liam Jun 02 '17 at 13:13
  • It may be slightly less efficient *when the click occurrs* (which is most likely neglible) but faster to initialize since you only ever attach one listener. – Strille Jun 02 '17 at 13:19