JQuery click event, not working

Question

I have the following scenario.

I have an index.php page with the following jQuery code

jQuery(document).ready(function(){ jQuery('#sIMG img').click(function() { var currentSRC = jQuery(this).attr('src'); var altSRC = jQuery(this).attr('title'); var imgID = jQuery(this).attr('id'); var cat = jQuery(this).attr('name'); /*Fade, Callback, swap the alt and src, fade in */ jQuery('#main').fadeOut('fast',function() { jQuery('#main').load("detail.php?id="+imgID+"&category="+cat); jQuery('#main').fadeIn('fast'); }); }); }); 

Now I have two div tags called #main and #right on the index.php page. When I click on a menu item, the right one changes to a bunch of images, if I click on one of these images, the above code should take effect and load into the main div, but it just doesn't work. images are located in a div called sIMG. Any help would be appreciated

Answer 1

Try using live

 jQuery('#sIMG img').live("click",function(){ }); 

As with jQuery 1.7, the .live () method is deprecated. Use . On () to attach event handlers.

 jQuery('#sIMG img').on("click",function(){ }); 

Answer 2

I think you are doing a click installation in an array that returns there. Try the following:

 jQuery('#sIMG img').each(function() { jQuery(this).click(function() { }); }); 

Answer 3

One of the reasons why clicking jquery does not work is because you have a duplicate id on the form.