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

ajax加载图像上的灯箱事件

1 个答案: