ドキュメントのロード後に動的にロードされるDOMの要素を操作する

Question

私のWebサイト（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代わりにあなたのクリック偶数ハンドラをバインドします。これにより、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); 
});