jQuery click event on image only fires once
I created a view of thumbnails. When the user clicks, I want the real image to pop-up in a dialog. That works the first time, but once the jQuery 'click' fires on an thumbnail it never fires again unless I reload the entire page. I've tried rebinding the click events on the dialog close that that does not help. Here is my code:
$(document).ready(function()
{
$("#tabs").tabs();
$(".selector").tabs( {selected: 0} );
$("img.gallery").live('click',
function()
{
var src= $(this).attr('src');
var popurl = src.replace("thumbs/", "");
PopUpImage(popurl,$(this));
});
// Preload animation for browser cache
var ajaximg = new Image();
ajaximg.src = 'images/ajax-loader.gif';
});
function LoadProgramsAccordion()
{
$(function() {
$("#programsaccordion").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$(function() {
$("#programsaccordioninner").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$(function() {
$("#policiesaccordioninner").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$(function() {
$("#registrationaccordioninner").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
}
function LoadGalleryView()
{
$('img.gallery').each(function(){
$(this).hover(function(){
$(this).attr('style', 'height: 100%; width: 100%;');
}, function(){
$(this).removeAttr('style');
});
});
}
function CheckImage(img,html,source)
{
if ( img.complete )
{
$('#galleryProgress').html('');
var imgwidth = img.width+35;
var imgheight = img.height+65;
$('<div id="viewImage" title="View"></div>').html(html).dialog(
{
bgiframe: true,
autoOpen: true,
modal: true,
width: imgwidth,
height: imgheight,
posit开发者_开发百科ion: 'center',
closeOnEscape: true
});
}
else
{
$('#galleryProgress').html('<img src="images/ajax-loader.gif" /><br /><br />');
setTimeout(function(){CheckImage(img,html);},50);
}
}
function PopUpImage(url,source)
{
var html = '<img src="'+url+'" />';
var img = new Image();
img.src = url;
if ( ! img.complete )
{
setTimeout(function(){CheckImage(img,html,source);},10);
}
}
PopUpImage() only executes the first time an image is clicked and I cannot figure out how to rebind.
OK, first off, refactor LoadProgramsAccordion.
function LoadProgramsAccordion()
{
$(function() {
$("#programsaccordion, #programsaccordioninner, #policiesaccordioninner, #registrationaccordioninner").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
}
Second, $(function(){ ...
works the same as $(document).ready(){ function(){...,
keep that in mind.
$(document).ready()
only fires one time - right after the page loads. So if you are calling LoadProgramsAccordion
multiple times, the inner stuff is only being executed one time.
Next, beware of $(this)
, it can change unexpectedly. So this code
function() { var src= $(this).attr('src'); var popurl = src.replace("thumbs/", ""); PopUpImage(popurl,$(this)); });
should be changed to look like this:
function() { var that = $(this); var src= that.attr('src'); var popurl = src.replace("thumbs/", ""); PopUpImage(popurl,that); });
Next, I would need to see PopUpImage. You just have a lot going on to figure out where the issue is.
Chris, thanks for the heads up on $(this), I've changed my programming because of it. For the rest, I've switched to Lightbox per your suggestion.
精彩评论