Question

我想通过ajax加载下一篇文章。第一次运行良好，但第二次网站加载全新。 preventDefault似乎不起作用。

我已经看到了类似的问题，我已经使用了建议的解决方案，但它对我不起作用。（.on或.live方法）

这是我的代码：

        // Ajax load more posts
        var loadMorePosts = function(e){
            e.preventDefault();
            var $container = $("#primary");
            var $loadMoreButton = $("#nav-ajax .nav-more");
            var $nextPageLink = $loadMoreButton.find("a").attr("href");

            // do the ajax magic
            $.post($nextPageLink, function(data){
                var $mainWrap = $("#main-wrap", data);
                var $content = $mainWrap.find("#primary article");

                // add the loaded posts
                $container.append($content);

                // grab the next PageLink
                var $nextLoadMoreButton = $mainWrap.find("#nav-ajax .nav-more");
                $loadMoreButton.replaceWith($nextLoadMoreButton);


            }, "html");             
        } // end loadMorePosts


        // Bind Functions
        $("#nav-ajax .nav-more").on("click", loadMorePosts);

我做错了什么？

提前感谢您的帮助！托米

Answer 1

每次点击都会更换一个新的“加载更多按钮”，根据此行推断：

$loadMoreButton.replaceWith($nextLoadMoreButton);

这会导致click事件绑定丢失，因为新的替换按钮不会继承绑定到其旧对应项的click事件。您应该使用.on()，并监听冒泡到document对象的点击事件：

$(document).on("click", "#nav-ajax .nav-more", loadMorePosts);

preventDefault第一次工作，但不是第二次工作

1 个答案: