いくつか検索しましたが、答えが見つからないので、ここで最初の質問をします。
基本的に、divをクリックすると、getを使用してhtmlをフェッチし、divの下部に追加します。フェッチされたhtmlには、最初にクリックされたのと同じdivが含まれています。元のdivと同じ機能を実行するには、クリック可能である必要があります。これは説明が難しく、JScrollPaneを使用するとさらに複雑になります
したがって、これは関連するJavaScriptです。
$(document).ready(function ($) {
$(document).on('click', 'div#append-tweets', function () {
//The url is altered to collect the next page of tweets in my example, but this will do
var currentURL = document.URL;
currentURL = currentURL + " #content-area > *";
//gets data from the url
$.get(currentURL, function (data) {
//finds the tweets on the page and returns them as HTML
html = $(data).find('#content-area').html();
//appends the html to the div - uses api as this is the JScrollPane
api.getContentPane().append(html);
}, 'html');
//reload the scrollbar
api.reinitialise();
//makes div button disappear after it is clicked
document.getElementById('append-tweets').style.display = "none";
});
});
そしてこれは関連するHTMLです:
<div id="content-area">
//other stuff
<div id="append-tweets">Load More Tweets</div>
</div>
現時点では、関数は最初のクリックで実行され、すべて正常に機能します。ボタンdivが消え(これは良いことです)、新しいボタンdivを含む新しいコンテンツが読み込まれますが、同じIDを持っていても、そのコンテンツをクリックすることはできません。助けてくれてありがとう、私はJSとJQueryに全く慣れていません。