ページ上のボタンがクリックされると、ページから div が削除され、Ajax 関数が実行され、Ajax 関数からのデータを使用して同じクラスのさらに多くの div が作成されます。
ボタンをもう一度クリックすると、Ajax 関数で作成された div が削除され、別の Ajax リクエストでさらに div が追加されます。
私が得ている問題は、それが完全に機能しないことです。ボタンが初めてクリックされると、想定どおりに動作します (div が削除され、新しい div が追加されます)。ボタンが 2 回目にクリックされると、どの div も削除されず (追加された div)、さらに div が追加されます。
これらの追加された div を削除する方法はありますか? これが live、delegate、または on 関数に関係するかどうかはわかりませんが、オンラインで見たすべての例では、2 つの別個のボタンを使用しています。1 つは div を作成するイベントをトリガーし、もう 1 つのボタンはそれらを削除します。これらすべてのイベントを同じボタンを使用して発生させたい
HTML の Div の例 (申し訳ありませんが、完全な HTML を投稿するわけではありません。Erlang のフレームワークと元のコード テンプレートを随所に使用しています。これは出力例です。
<div id="tweet-container">
<div class="tweets" style="width:940px">
<img style="float:left; width: 60px; padding-right: 9px" src=http://a0.twimg.com/profile_images/2454954651/Snapshot_20120528_normal.jpg> <p style="float:right">Fri, 09 Nov 2012 20:29:05 +0000</p>
<td><a href="http://twitter.com/PndWallace"><b>Pat Wallace</b></a> @PndWallace</td>
<td><p>RT @NASANPP: RT @pndwallace: @NASA @NASANPP looks like we in Ireland are living in phtytoplankton Central....makes me feel better lol </p></td>
</div>
<div class="tweets" style="width:940px">
<img style="float:left; width: 60px; padding-right: 9px" src=http://a0.twimg.com/profile_images/280761746/calvin-and-hobbes_normal.jpg> <p style="float:right">Fri, 09 Nov 2012 20:29:38 +0000</p>
<td><a href="http://twitter.com/rentagoodbook"><b>Lise</b></a> @rentagoodbook</td>
<td><p>RT @NASA: [Image of the Day] Happy Little Crater on Mercury http://t.co/CQbuLPNi #iotd </p></td>
</div>
</div>
脚本:
function removeTweets(){
$('div').remove('#tweets');
}
function ajaxCheck(){
$('a.Tpage').click(function(evt){
$currentPage = $('#pageNo').text();
$totalPages = $('#totalPages').text();
$searchWord = $('#searchWord').text();
$selection = $(this).attr('title');
$.ajax({
url: "/search/get_tweet_page/" + $currentPage + "/" + $totalPages + "/" + $searchWord +
"/" + $selection,
dataType: "json",
}).done(function(data){
removeTweets();
var list = data.tweet;
for (var i = 0; i < list.length; i++){
$('#errors').append('<div class="tweets" style="width:940px">' +
'<img style="float:left; width: 60px; padding-right: 9px" src="' + list[i].profileimage_url + '">' +
'<p style="float:right">' + list[i].created_at + '</p>' +
'<td><a href="http:///twitter.com/' + list[i].from_user + '"><b>' + list[i].fromuser_name + '</b></a>' + list[i].from_user + '</td>' +
'<td><p>' + list[i].text + '</p></td>' +
'</div>');
} // end for
}); // end done
evt.preventDefault();
}) //end click