jQuery：仅在单击“加载更多…”时才加载下一页

Question

I need to load contents on each click of the text "load more" at the end if the DIV. The code I have currently is as below:

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

and

$(".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>");

});

The first click works as it loads more from nextPage.php. However the consequent click doesn't trigger the load. What am I doing wrong?

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

As the .load append every time to the div#Container as new, you should use a live event handler to that .load like following:

$("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

Try using .live() method or.on() of jquery , this attaches an event handler for all elements which match the current selector, now and in the future.

Click here for information and example for .live event in jquery
I hope this will definitely solve you problem.

Best of Luck! :)