【问题标题】:Removing an appended item and adding more elements (involves AJAX)删除附加项并添加更多元素(涉及 AJAX)
【发布时间】:2012-10-30 05:33:53
【问题描述】:

当点击页面上的按钮时,它会从页面中删除 div,运行 Ajax 函数,然后使用来自 Ajax 函数的数据创建更多相同类的 div。

如果再次点击该按钮,通过Ajax函数创建的div应该被移除,并且应该通过另一个Ajax请求添加更多的div。

我遇到的问题是它不能完全工作。第一次单击按钮时,它会按预期执行(删除 div,并添加新 div)。当第二次点击按钮时,不会删除任何 div(附加的 div),而是添加更多 div。

有没有办法让这些附加的 div 被删除?我不确定这是否涉及 live、delegate 或 on 功能,但我在网上看到的所有示例都使用两个单独的按钮,一个用于触发创建 div 的事件,而另一个按钮用于删除它们。我希望所有这些事件都使用同一个按钮发生

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 

【问题讨论】:

    标签: jquery dynamic delegates append live


    【解决方案1】:

    removeTweets() 函数中使用类选择器.tweets 而不是id 选择器#tweets

    【讨论】:

    • 对不起,我忘了更新代码,我在 中使用了带有推文信息的 id="tweets",所以这就是为什么我在 removeTweets() 函数中使用了#tweets。但你是对的,无论如何,这就是问题所在
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多