0

我第一次尝试使用 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 知道正在添加的新内容？

4

1 回答 1

0

为此放弃 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;
}
于 2012-11-10T12:53:02.883 回答