操纵文档加载后动态加载的DOM元素

Question

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

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

我怎样才能使浏览器，jQuery的，或任何需要，请注意HESE新的图像是在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; 
} 

感谢，

-Slate

Answer 1

使用.on而不是绑定你的点击甚至处理器。这将确保even获取当前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); 
});