我有一个使用 AJAX 刷新内容的按钮,调用refreshFeed()。我仍然需要操作 AJAX 加载的内容,因此我将 .live() 附加到 AJAX 加载内容中的一些链接以启动其他 AJAX 调用,比方说“评论”。 “评论”按钮从隐藏的输入字段中收集一些值并将其发布到服务器。
如果我不点击刷新,它就可以正常工作。但是,我发现经过几次刷新后,当我单击具有 .live('click', function(){}) 键的链接(“评论”按钮)时,它会向服务器发送多个 POST 请求。我猜是因为旧的 DOM 元素仍然存在,所以我尝试使用refreshFeed()中的.remove()、.empty()删除所有元素。但问题仍然存在。
这是代码:
$.ajaxSetup({
cache: false
});
$(".submit-reply").live('click', function () {
var mIDValue = $(this).parent().find("input.re-fb-msg-id").val();
var accessValue = $(this).parent().find("input.re-fb-token").val();
var commentValue = $(this).parent().find(".comment").val();
var postReplyUrl = "fconfirm.jsp";
var ajax_reply_load = "<img src='img/scanningsmall.gif' alt='loading...' />";
$(this).parent().parent().find(".result-note").show();
$(this).parent().parent().find(".result-note .out-container").html(ajax_reply_load).fadeIn(300).load(postReplyUrl, {
mID: mIDValue,
access: accessValue,
comment: commentValue,
});
$(this).parent().hide();
});
function refreshFeed() {
$.ajaxSetup({
cache: false
});
$("#feeds div").remove();
$(".submit-reply").remove();
var loadingFeeds = "<div class='loading-feed'><img src='img/scanningsmall.gif' alt='loading...' /><p>Loading...</p></div>"
var feedURL = "pbsc.htm"
var feedParameter = "clientId=<%=clientId%>&getPostTweets=1&rescan=1";
$("#feeds").html(loadingFeeds).load(feedURL, feedParameter);
}
我是Jquery新手,真的不知道问题出在哪里。请帮我!谢谢你!
最佳答案
如果您的旧元素已发送请求,则可以使用 ajax 请求对象来停止这些请求。您可以使用ajax请求对象。
var request;// have global variable for request
//...........
var request = $.ajax({
type: 'GET',
url: 'someurl',
success: function(result){
$(yourSelecter).html(result);
}
});
function refreshFeed() {
request.abort()// in refreshfeed function you can abort it
}
如果您有多个 ajax 请求,您可以使用 ajax 请求数组
$.xhrPool = [];//数组的全局变量
$.xhrPool.abortAll = function() {
_.each(this, function(jqXHR) {
jqXHR.abort();
});
};
$.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR);
}
});
........EDIT.........
我认为您的问题在于实时功能。我假设您的 .submit-reply
位于 pbsc.htm
中,因此不要使用实时函数,而是尝试使用此代码。这将
function BindClick(){
$(".submit-reply").Click(function () {
var mIDValue = $(this).parent().find("input.re-fb-msg-id").val();
var accessValue = $(this).parent().find("input.re-fb-token").val();
var commentValue = $(this).parent().find(".comment").val();
var postReplyUrl = "fconfirm.jsp";
var ajax_reply_load = "<img src='img/scanningsmall.gif' alt='loading...' />";
$(this).parent().parent().find(".result-note").show();
$(this).parent().parent().find(".result-note .out- container").html(ajax_reply_load).fadeIn(300).load(postReplyUrl, {
mID: mIDValue,
access: accessValue,
comment: commentValue,
});
$(this).parent().hide();
});
}
function refreshFeed() {
$.ajaxSetup({
cache: false
});
$("#feeds div").remove();
$(".submit-reply").remove();
var loadingFeeds = "<div class='loading-feed'><img src='img/scanningsmall.gif' alt='loading...' /><p>Loading...</p></div>"
var feedURL = "pbsc.htm"
var feedParameter = "clientId=<%=clientId%>&getPostTweets=1&rescan=1";
$("#feeds").html(loadingFeeds).load(feedURL, feedParameter,BindClick);
}
关于javascript - jQuery - AJAX 调用后,旧元素仍然存在于 DOM 中?如何去除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6818954/