私はこれに苦労し、SOで同様の答えを探してきましたが、これを理解できないようです。
.load()を使用して外部PHPファイルからロードしているアクティビティフィードがあります。外部ファイルには、textarea内の文字をカウントし、次のような長い投稿を切り捨てるためのスクリプトが含まれています。
$('.watermark_comment').jqEasyCounter({'maxChars': 2000,'maxCharsWarning': 1990,'msgFontSize': '10px','msgFontColor': '#666666','msgFontFamily': 'Arial','msgTextAlign': 'left','msgWarningColor': '#F00','msgAppendMethod': 'insertAfter' }); $('.truncate').jTruncate();
ページが最初に読み込まれるとき、すべてが完全に機能します。ただし、外部ファイルには、無限のスクロールを作成するためのスクリプトもあります。'href'には、ページングクエリ文字列が含まれています。
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 500) {
//Add something at the end of the page
$('<div></div>').appendTo('#activity_feed_load').load($('.older_posts:last').attr('href'));
$('.older_posts:first').remove();
}
});
問題は、scroll関数が呼び出され、.loadが再度呼び出されるとすぐに、フィード内の以前のセレクターに適用されたスクリプトが「2倍」になることです。たとえば、.load()が呼び出されるたびに、jqEasyCounterに対応する2つのカウントダウンと、jTruncateに対応する2つの「more」があります。.loadが呼び出されるたびに、インスタンスの数が1ずつ増加します。
セレクターを使用してスクリプトを削除し、getscriptsを使用してファイルを適切にロードする方法について説明している他の投稿を読みました。しかし、.loadを繰り返し呼び出して結果を追加する場合、これをどのように行うのでしょうか。
これについての助けを本当にいただければ幸いです!
更新 OK、Kevinの提案に基づいて、外部ファイルからロードスクリプトを削除し、次のようにメインファイルに配置しました。
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 500) {
//Add something at the end of the page
$('<div></div>').appendTo('#activity_feed_load #no_script').load($('.older_posts').not(".ignore").attr('href')).done(function(){
$('.older_posts').not(".ignore").addClass("ignore");
$('.watermark_comment').not(".initialized").jqEasyCounter({
'maxChars': 2000,
'maxCharsWarning': 1990,
'msgFontSize': '10px',
'msgFontColor': '#666666',
'msgFontFamily': 'Arial',
'msgTextAlign': 'left',
'msgWarningColor': '#F00',
'msgAppendMethod': 'insertAfter'
}).addClass("initialized");
});
}
});
ロード後にページャーリンクを削除し、次にロードが呼び出されたときに最新のページャーリンクを使用しようとしています。残念ながら、スクロールするとスクリプトが1回起動し、ページがフリーズします。スクロールイベントを正しくバインドしているかどうかわかりません。代わりに.on()または.live()を使用する必要がありますか?