Question

我有一个按钮，使用AJAX刷新内容，调用refreshFeed（）。我仍然需要操纵AJAX加载的内容，所以我将.live（）附加到AJAX加载内容中的某些链接以启动其他AJAX调用，让我们说“评论”。 “注释”按钮从隐藏的输入字段中收集一些值并将它们发布到服务器。

如果我不单击刷新，它可以正常工作。但是，我发现经过几次刷新后，当我点击具有.live（'click'，function（）{}）bond（“注释”按钮）的链接时，它会向服务器发送多个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

}

如果您有sevaral 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);
}

Answer 2

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

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

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

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

2 个答案: