jQuery的负载更多的内容的onclick [英] jquery load more content onclick

问题描述

这是我到目前为止有：

$(document).ready(function(){   
  $("#feed-page").load("feed.php #first-feed");

  $('.feed-load').click(function(){   
    $("#feed-page").load("feed.php #second-feed" ,  hideLoading);
    $(".feed-load .button-content").css( "display" , "none" );
    $('.feed-load-img').css( "display" , "block" );
  });

  function hideLoading() {  
    $(".feed-load .button-content").css( "display" , "block" );
    $(".feed-load .feed-load-img").css( "display" , "none" ); 
  }
}); // end document ready

我的问题是，当我点击加载更多什么情况是，该内容被换出。

My problem is that when I click on "load more" what happens is that the content gets swapped out.

这不是我所希望发生的事情，我只是想将内容传送到所有留这意味着已经有在页面加载的内容我想，要留然而，当我点击加载更多，我想这内容留下，但由于某些原因，内容最初有被换出，与我不希望发生新的内容。

That is not what I want to happen, I just want the content to all stay meaning the content that is already there on page load I want that to stay however when I click on "load more" I would like that content to stay but for some reason the content that was originally there gets swapped out with the new content which I don't want to happen.

有一个活生生的例子可以在这里找到： http://www.cyberfanatic.com

A live example can be found here: http://www.cyberfanatic.com

推荐答案

与当前的code的问题是，用户点击该按钮后，你是在存在一个加载新的数据。请参见 jQuery的.load（）。

The issue with your current code is that after the user clicks the button, you are loading the new data over the existent one. See jQuery .load().

您需要的是追加新的数据，以preserve的存在之一：

What you need is to append the new data, in order to preserve the existent one:

// on click
$('.feed-load').click(function(){   

  // load the new data to an element
  $("<div>").load("feed.php #second-feed", function() {

    // all done, append the data to the '#feed-page'
    $("#feed-page").append($(this).find("#second-feed").html());

    // call your function
    hideLoading();
  });

  // continue the remaining of your code...
  $(".feed-load .button-content").css( "display" , "none" );
  $('.feed-load-img').css( "display" , "block" );
});

---

EDITED

附加了一些动画的评论要求：

---

EDITED

Append with some animation as requested at the comment:

...
// all done, append the data to the '#feed-page'
var $html   = $(this).find("#second-feed").html(),
    $newEle = $('<div id="second-feed" />').attr("style", 'display:none;').html($html);

$("#feed-page").append($newEle);
$('#second-feed').slideToggle();
...

请参阅此小提琴例！

这篇关于jQuery的负载更多的内容的onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！