Javascript ajax加载图像上的Lightbox事件

我第一次尝试使用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>

$（文档）.ready（函数（）{
$（“.svg_图表”）。单击（函数（）{
变量地址=$（this.attr（“src”）；
地址=地址。替换（\'height=80\'，\'height=300\'）；
$（“弹出”）.fadeIn（“慢”）；
$（“#lightbox”）.attr（“src”，地址）；
});
$（“#lightbox”）。单击（函数（）{
$（“弹出”）.fadeOut（“快速”）；
});
});

该代码在加载页面时已经加载的图像上运行良好，但在使用Ajax动态获取的图像上运行不正常，尽管它们添加了相同的类。我猜这是因为doc.ready函数只在加载初始页面后才知道内容。

---

如何使jQuery了解正在添加的新内容？

为此删除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>

您可以将“点击”功能替换为“实时”功能，最好是“打开”功能

#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;
}