jQuery - AJAX 调用后，旧元素仍然存在于 DOM 中？如何去除？

Question

我有一个使用 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 新手，真的不知道问题出在哪里。请帮我！谢谢你！

Answer 1

如果您的旧元素已发送请求，则可以使用 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);
  }
});

......编辑......

我认为你的问题是实时功能。我假设您的 .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);
}

Answer 2

在代码的第一部分中，尝试：

$(".submit-reply").live('click', function(e) {
  e.preventDefault();
  // rest of your code here 
});

传入“e”并调用 e.preventDefault() 将阻止任何其他 HTML 运行（例如，如果将 .submit-reply 设置为提交表单）。