jQuery Ajax頁面的部分更新

Question

這是我簡單的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請求對第一個請求有效，但對第二個請求無效。 第二個請求稱為正常鏈接點擊。 據我了解，新加載的下一個和上一個鏈接有些不了解DOM。

如何更改此設置，以便第二次單擊“下一個/上一個”鏈接也會調用ajax請求。 我希望我的問題很清楚

Answer 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() ，它可能更適合您的需求，但是我不確定。

Answer 2

問題是您在文檔加載時綁定了click事件。 然后，當替換元素時，將重新加載它們而沒有任何綁定。 您可以重新綁定它們，也可以使用jQuery的live（）方法。

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