1

我目前正在尝试在我的网站 (www.slatewerner.com) 上制作类似灯箱的自定义功能。到目前为止，我的方法是在单击时将图像包装在一个 div 中，然后将其绝对定位在内容流之外，并具有半不透明的灰色背景。我所有的图像，除了登陆图像/状态，都是通过 AJAX 加载的。我面临的问题是我无法使用“灯箱”功能访问新加载的图像。

我的尝试可以在这里找到：http ://www.slatewerner.com/index_3.1

我怎样才能让浏览器、jQuery 或任何需要的东西知道这些新图像在 DOM 中？或者我怎样才能重写我的函数，使其对新加载的内容有效？

我的 jQuery（仅灯箱部分）：

$(document).ready(function(){
$('#content img').click(function(){
    var img = this;
    var width = img.clientWidth;
    var height = img.clientHeight;
    var imgWidth = -width/2;
    var imgHeight = -height/2;
    $(this).wrap('<div class="box"></div>');
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
    $('.box').css('margin-left', imgWidth);
    $('.box').css('margin-top', imgHeight);
});

$('.close').click(function(){
    close_box();
});

$('.backdrop').click(function(){
    close_box();
});

});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
    $('.backdrop, .box').css('display', 'none');
});
}

我的 CSS（仅灯箱部分）：

.backdrop {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}


.box {
position:absolute;
top:50%;
left:50%;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close {
float:right;
margin-right:6px;
cursor:pointer;
}

谢谢，

-石板

4

1 回答 1

2

.on改为使用绑定您的点击事件处理程序。这将确保偶数被绑定到当前在 DOM 中的元素和稍后动态插入的元素。

$('#content').on('click', 'img', function(){
    var img = this;
    var width = img.clientWidth;
    var height = img.clientHeight;
    var imgWidth = -width/2;
    var imgHeight = -height/2;
    $(this).wrap('<div class="box"></div>');
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
    $('.box').css('margin-left', imgWidth);
    $('.box').css('margin-top', imgHeight);
});
于 2012-05-04T18:11:59.327 回答