JavaScript alert callback not working inside a function

Question

I am trying to make a image preview containing of about 5-6 images which will appear one after another when user hovers over it (not like a carousel with prev and next buttons). Here is the fiddle consisting of what I gathered so far.. i don't know if this approach is right or not.. but I am stuck as the alert callback is not working. Could someone please tell me what is wrong?

$(function() 
  {
      var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');

      for (var i = 0, n = imageCount.length; i < n; i++) {
          imageCount[i].on('click', function(e) 
              {
                  alert('Everything is going fine!');
              }          
          );
      }
  }
);

Answer 1

You are attempting to call on() , a jQuery method, on an HTMLElement (a DOM element). You can't do that, jQuery methods can only be called on jQuery collections. It's easy to get a jQuery collection for the elements you desire:

• Use .find() to match the images
• There's no need for a for() loop, jQuery's .on() will handle looping for you.
• You may also want to prevent the default behaviour of your anchors

$(function () {
    var imageCount = $('#product_grid_list').find('figure img');
    imageCount.on('click', function (e) {
        e.preventDefault()
        alert('Everything is going fine!');
    })
});

JSFiddle

Answer 2

You are using js AND jQuery at same time. It's wrong. If you use jQuery, than click event will be like this:

$(document).('click', '#product_grid_list figure img', function(){
     alert('Everything is going fine!');
});

Answer 3

You are using a mix of jQuery and standalone javascript. You might as well go all the way to jQuery, with something like:

$('#product_grid_list figure:first img').click(function(e) {
      alert('Everything is going fine, hopefully!');
   });

You did not send the corresponding HTML, so we cannot test whether the above is correct.

Answer 4

it's just a simple click event in jQuery, no need to use js: http://jsfiddle.net/wP3QQ/11/

$('#product_grid_list').find('figure img').click(function(e){
    alert('Everything is going fine!');
    e.preventDefault();
    });

Answer 5

You want the hover effect, so click event should not be used over here. It should be mouseover.

Working Fiddle

Code Snippet:

$(document).on('mouseover','#product_grid_list  figure  img',function(e){
      alert("now it is working");
});

Answer 6

The root cause of click event callback can't be triggered is that you're trying to register a event handler on a "DOM" (in this case: imageCount[i] ) element in jQuery way. Try to register the event handler like this if you want to use pure javascript solution:

imageCount[i].addEventListener('click', function(e){
    alert('Everything is going fine!');
});

Here is a jsfiddle demo .

Note: I didn't consider the cross browser issue in this case.

BTW, try to cache the length of imageCount node list, it will improve the performance.