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 に答える