jquery - Jquery：仅在第一次单击“加载更多...”时加载下一页

Question

如果是 DIV，我需要在每次单击末尾的文本“加载更多”时加载内容。我目前拥有的代码如下：

<div id="Container"> <p class="load">load more</P> </div>

和

$(".load:last").click(function(){
$(".load:last").load("nextPage.php", function() {
$(this).hide();

$("div#Container").append($(this).html());
$("div#Container").append("<p class=\"load\">load more...</p>");

});

第一次单击有效，因为它从 nextPage.php 加载更多内容。然而，随后的点击不会触发加载。我究竟做错了什么？

Answer 1

    $(".load:last").live('click', function () {
        $(this).remove();
        //Or
        // $(this).hide();
        $(".load:last").load("nextPage.php", function () {
            $("div#Container").append($(this).html());
            $("div#Container").append("<p class=\"load\">load more...</p>");
        });
    });

Answer 2

作为.load每次附加到div#Container新的，您应该使用实时事件处理程序，.load如下所示：

$("div#Container").on('click', '.load', function() {
  $(this).parent('div#Container').load('nextPage.php', function() {
     $('div#Container').append("<p class=\"load\">load more...</p>");
  })
})

Answer 3

尝试使用jquery 的 .live() 方法或 .on()，这将为现在和将来与当前选择器匹配的所有元素附加一个事件处理程序。

单击此处获取 jquery 中 .live 事件的信息和示例，
我希望这一定能解决您的问题。

祝你好运！:)