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

时间:2015-01-14 15:50:24

标签: jquery

我想通过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);

我做错了什么?

提前感谢您的帮助! 托米

1 个答案:

答案 0 :(得分:1)

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

$loadMoreButton.replaceWith($nextLoadMoreButton);

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

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