ajax加载图像灯箱事件

Question

我想第一次使用jQuery。我有一些通过ajax调用加载的图像（不是jQuery相关的）。该页面的制作方式是，如果刷新页面，加载的图像将保留。

我发现这个代码在别处：

$(document).ready(function(){ 
$(".svg_chart").click(function(){ 
    var address = $(this).attr("src"); 
    address = address.replace(\'height=80\', \'height=300\'); 
    $("#popup").fadeIn("slow"); 
    $("#lightbox").attr("src",address); 
}); 
$("#lightbox").click(function(){ 
    $("#popup").fadeOut("fast"); 
}); 
}); 

    <div id="popup"> 
     <div id="center"> 
      <img id="lightbox" src="images/blank.jpg" > 
     </div> 
    </div> 
    </div> 

当页面加载代码工作已经加载的图片不错，但不是拿来使用Ajax动态影像，尽管他们得到添加同一类。我想这是因为doc.ready函数只在加载初始页面后才知道内容。 我能做些什么来让jQuery了解新增内容？

Answer 1

为此删除jQuery。这是矫枉过正，不起作用！

<img id="svg_1" class="svg_chart" style="float: left" width="49%" ondblclick="expand_me(this.id)" alt="" /> 

<div id="popup"> 
</div> 
<div id="center"> 
    <img onclick="expand_me(true)" id="lightbox" src="images/blank.jpg" /> 
</div> 
<script type="text/javascript"><!-- // --><![CDATA[ 
function expand_me(el) 
{ 
    if (el !== true) 
    { 
     link = document.getElementById(el).src; 
     link = link.replace(\'height=80\', \'height=300\'); 
     document.getElementById(\'popup\').style.display = "block"; 
     document.getElementById(\'center\').style.display = "block"; 
     document.getElementById(\'lightbox\').src = link; 
    } 
    else 
    { 
     document.getElementById(\'popup\').style.display = "none"; 
     document.getElementById(\'center\').style.display = "none"; 
    } 
} 
// ]]></script> 

CSS的一部分：

#popup 
{ 
    background:#000000; 
    height:100%; 
    width: 100%; 
    position:fixed; 
    top: 0; 
    left: 0; 
    display: none; 
    opacity: 0.9; 
} 
#center 
{ 
    height:100%; 
    width: 100%; 
    max-width: 1200px; 
    position:fixed; 
    top: 0; 
    margin: 6% auto; 
    display: none; 
} 
#lightbox 
{ 
    width: 100%; 
    cursor: pointer; 
}