0

ページを部分的に更新する簡単な jQuery 関数を次に示します。

 <script type="text/javascript">
$(document).ready(function () {
    $("#prevlinkh").click(function () {
        var pagenumber = $("#prevlinkh").attr("pn");
        $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", "");
        return false;
    });

    $("#nextlinkh").click(function () {
        var pagenumber = $("#nextlinkh").attr("pn");
        $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", "");
        return false;
    });
}); 
</script>

から呼び出されます

<a id="prevlinkh" pn="10" href="/uploads/All/10">Previous</a>
<a id="nextlinkh" pn="12" href="/uploads/All/12">Next</a>

上記のリンクは、部分的に更新された div (ファイルリスト) にあります。

問題は、ajax リクエストが最初のリクエストでは機能するが、2 番目のリクエストでは機能しないことです。2 番目のリクエストは、通常のリンク クリックとして呼び出されます。新しくロードされた次のリンクと前のリンクを理解しているように、DOM にアクセスできない方法があります。

2回目に次/前のリンクをクリックすると、ajaxリクエストも呼び出されるように、これを変更するにはどうすればよいですか。私の質問が十分に明確であることを願っています

4

2 に答える 2

2

最も簡単な方法の 1 つは、jQuery のlive()関数を使用することです。

 <script type="text/javascript">
$(document).ready(function () {
    $("#prevlinkh").live('click',function () {
        var pagenumber = $("#prevlinkh").attr("pn");
        $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", "");
        return false;
    });

    $("#nextlinkh").live('click',function () {
        var pagenumber = $("#nextlinkh").attr("pn");
        $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", "");
        return false;
    });
}); 
</script>

を使用するオプションもありますdelegate()。これは、ニーズにより適している可能性がありますが、完全にはわかりません。

于 2010-10-17T21:20:09.750 に答える
1

問題は、ドキュメントの読み込み時にクリック イベントをバインドしていることです。次に、要素が置き換えられると、何もバインドされていない状態で再読み込みされます。それらを再バインドするか、jQuery の live() メソッドを使用できます。

http://api.jquery.com/live/

于 2010-10-17T21:18:46.113 に答える