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。

如何更改此设置，以便第二次点击next / prev链接也可以调用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/

jQuery ajax部分更新页面

2 个答案: