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

Posted 2023-05-09

【中文标题】jQuery - 在 AJAX 调用之后，旧元素仍然存在于 DOM 中吗？如何去除？

【英文标题】：jQuery - after AJAX Call, old elements still exist in DOM? How to remove?

【发布时间】：2011-10-12 17:37:53

【问题描述】：

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

【问题讨论】：

谢谢。但是 HTML 太复杂，无法发布。我仔细检查了代码，我确定 .find() 路径是正确的 - 因为当我不刷新页面时，一切正常。

【参考方案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);

【讨论】：

非常感谢贾扬塔。但我的问题不在于中止请求；页面已经收到响应并显示结果，问题是我使用AJAX重新加载内容后，当我点击提交按钮时会提交两次（虽然页面上只有一个按钮）！当我重新加载页面 3 次时，它将提交 3 次； reload 6 次会导致 6 个提交，等等。这个问题的根本原因是什么？谢谢~

见我添加了新代码。我假设 .submit-reply 在“pbsc.htm”中，如果不只是删除 live() 函数并使用 Click() 函数。

【参考方案2】：

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

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

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