基本上這是做的是淡入預先存在的div,然後加載圖像。當圖像被加載後,它會將其添加到其中一個預先存在的div中。然後它添加一個帶有xButton ID的新div。然後它$('#xButton')。click()應該隱藏3個div。但它不起作用。如果我將click()更改爲#modalImage或#overlay,它可以工作,但不適用於#xButton。我真的很想弄清楚爲什麼它不能正常工作,我應該怎麼做。謝謝。爲什麼.click()在這種情況下不起作用?
$(function(){
$('#container a').click(function(e){
e.preventDefault();
var id = $(this).attr('href'),
img = new Image();
$('#overlay').fadeIn(function(){
$('#modalImage').fadeIn();
});
$(img).load(function(){
$(this).hide();
$('#modalImage').removeClass('loader').append(this);
$(this).fadeIn(function(){
var ih = $(this).outerHeight(),
iw = $(this).outerWidth(),
newH = ($(window).height()/10)*7,
newW = ($(window).width()/10)*7;
if (ih >= iw && ih >= newH) {
$(this).css('height',newH + 'px');
$(this).css('width', 'auto');
}
else if (ih >= iw && newH > ih) {
$(this).css('height', ih + 'px');
$(this).css('width', 'auto');
}
else if (iw > ih && iw >= newW) {
if ((newW/(iw/ih)) > newH) {
$(this).css('width', 'auto');
$(this).css('height', newH + 'px');
}
else {
$(this).css('width', newW + 'px');
$(this).css('height', 'auto');
}
}
else {
$(this).css('width', iw + 'px');
$(this).css('height', 'auto');
}
var padW = ($(window).width() - $(this).outerWidth())/2,
padH = ($(window).height() - $(this).outerHeight())/2;
console.log (padH + ' ' + padW);
$(this).css('top', padH);
$(this).css('left', padW);
if($('#overlay').is(":visible") == true) {
ih = ih + 4;
$('<div id="xButton">x</div>').appendTo('#modalImage');
if (padH >= 0) {
$('#xButton').css('top', padH - 4).css('right', padW - 65);
}
else {
$('#xButton').css('top', '20px').css('right', padW - 65);
}
}
});
}).attr('src', id);
});
$('#xButton').click(function(){
$(this).hide();
$('#overlay').fadeOut(function(){
$('#modalImage img').css('top', '-9999px').remove();
$('#xButton').remove();
$('#modalImage').addClass('loader');
});
});
});
非常感謝。我意識到這是因爲該元素不存在於文檔加載中,只是不知道如何解決問題。再次感謝 – Deshiknaves 2010-04-15 13:46:42
沒問題,我以前一直處於同一個位置! – NeonNinja 2010-04-15 20:19:06