I have the following scenario.
I have a index.php page with the following JQuery code included
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 in the index.php page. When I click on a menu item right changes to a bunch of images, if I click on one of those images the above code should take effect and load into the main div, but it's just not working. the images are located within a div called sIMG. Any help will be appreciated
I have the following scenario.
I have a index.php page with the following JQuery code included
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 in the index.php page. When I click on a menu item right changes to a bunch of images, if I click on one of those images the above code should take effect and load into the main div, but it's just not working. the images are located within a div called sIMG. Any help will be appreciated
Share Improve this question edited Apr 4, 2014 at 6:31 Paul 5,2233 gold badges38 silver badges43 bronze badges asked Mar 17, 2010 at 12:44 ElitmiarElitmiar 36.9k77 gold badges182 silver badges233 bronze badges 4- Are the images that are loaded in on the right (after clicking a parent image on the right) inserted via javascript or are they just hidden with css when the page loads? – Levi Commented Mar 17, 2010 at 12:47
- Do you use a JS debugger? Check Firebug for any error messages. – Felix Kling Commented Mar 17, 2010 at 12:48
-
Kindly elaborate on "just not working". Does it run at all? What happens when you stick
alert
all over the place? – Kobi Commented Mar 17, 2010 at 12:48 -
1
If the images are dynamically loaded, you'll have to change it to:
jQuery('#sIMG img').live('click', function(){
– Jim Schubert Commented Mar 17, 2010 at 12:51
3 Answers
Reset to default 12Try using live
jQuery('#sIMG img').live("click",function(){
});
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
jQuery('#sIMG img').on("click",function(){
});
I think what you're doing is setting "click" on the array that is return there. Try this:
jQuery('#sIMG img').each(function() {
jQuery(this).click(function() {
});
});
One of the reasons that the jquery click don't work is that you have dupplicates id's in the form.