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

我有一个使用AJAX刷新内容的按钮，调用refreshFeed（）。我仍然需要操作AJAX加载的内容，所以我在AJAX加载的内容中添加了.live（）来启动其他AJAX调用，比如“Comment”。“注释”按钮从隐藏的输入字段中收集一些值，并将它们发布到服务器

如果不单击“刷新”，它可以正常工作。然而，我发现在几次刷新之后，当我单击具有.live（'click'，function（）{}）绑定的链接（“comment”按钮）时，它会向服务器发送多个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);
}

$.ajaxSetup({
缓存：false
});
$（“.submit reply”）.live（'click'，函数（）{
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=“”；
$（this.parent（）.parent（）.find（“.result note”）.show（）；
$（this）.parent（）.parent（）.find（“.result note.out container”）.html（ajax\u reply\u load）.fadeIn（300）.load（postReplyUrl{
中值：中值，
access:accessValue，
comment:commentValue，
});
$（this.parent（）.hide（）；
});
函数refreshFeed（）{
$.ajaxSetup({
缓存：false
});
$（“#提要div”）.remove（）；
$（“.submit reply”）.remove（）；
var loadingFeeds=“加载…”
“
var feedURL=“pbsc.htm”
var feedParameter=“clientId=&getpostweets=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);
  }
});

……编辑

我认为你的问题在于生活功能。我假设您的

.submit reply

位于

pbsc.htm

中，因此不要使用live函数，请尝试此代码。这将

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);
}

函数BindClick（）{
$（“.submit reply”）。单击（函数（）{
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=“”；
$（this.parent（）.parent（）.find（“.result note”）.show（）；
$（this）.parent（）.parent（）.find（“.result note.out-container”）.html（ajax\u reply\u load）.fadeIn（300）.load（postReplyUrl{
中值：中值，
access:accessValue，
comment:commentValue，
});
$（this.parent（）.hide（）；
});
}
函数refreshFeed（）{
$.ajaxSetup({
缓存：false
});
$（“#提要div”）.remove（）；
$（“.submit reply”）.remove（）；
var loadingFeeds=“加载…”
“
var feedURL=“pbsc.htm”
var feedParameter=“clientId=&getpostweets=1&rescan=1”；
$（“#feeds”）.html（loadingFeeds）.load（feedURL、feedParameter、BindClick）；
}

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

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

---

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

非常感谢您。但我的问题不是中止请求；页面已经收到响应并显示结果，问题是在我使用AJAX重新加载内容后，当我单击submit按钮时，它将提交两次（尽管页面上只有一个按钮）！当我重新加载页面三次时，它将提交三次；重新加载6次将导致6次提交，等等。此问题的根本原因是什么？谢谢~看，我添加了新代码。如果不只是删除live（）函数并使用Click（）函数，我假设.submit reply在“pbsc.htm”中。谢谢。但是HTML太复杂，无法发布。我仔细检查了代码，我确信.find（）路径是正确的，因为当我不刷新页面时，一切都正常工作。