jQuery - 在AJAX調用之後，舊的元素仍然存在於DOM中？如何刪除？

我有一個按鈕來刷新使用AJAX的內容，調用refreshFeed（）。我仍然需要操縱由AJAX加載的內容，所以我將.live（）添加到加載了AJAX的內容中的某些鏈接以啓動其他AJAX調用，比方說「評論」。「評論」按鈕從隱藏的輸入字段收集一些值並將它們發佈到服務器。jQuery - 在AJAX調用之後，舊的元素仍然存在於DOM中？如何刪除？

它工作正常，如果我不點擊刷新。但是，我發現經過多次刷新後，當點擊具有.live（'click'，function（）{}）bond（「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); 
}

我是新來的jQuery和真的不知道問題出在哪裏。請幫幫我！謝謝！

來源

2011-07-25 um88hao

任何HTML去與此？ – kasdega

謝謝。但HTML過於複雜，無法發佈。我仔細檢查了代碼，我確信.find（）路徑是正確的 - 因爲當我不刷新頁面時，一切正常。 – um88hao

如果您的舊元素髮送了請求，那些可以通過使用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); 
    } 
});

.. ......編輯.........

我認爲你的問題是與實時功能。我假設你的.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); 
}

來源

2011-07-25 16:12:49

非常感謝你Jayantha。但我的問題不在於放棄請求;該頁面已經收到回覆並顯示結果，問題是我使用AJAX重新加載內容後，當我點擊提交按鈕時，它會提交兩次（儘管頁面上只有一個按鈕）！當我重新加載頁面三次時，它會提交3次;重新加載6次會導致6次提交等等。這個問題的根源是什麼？謝謝〜 – um88hao

請參閱我添加了新的代碼。我假設.submit-reply在「pbsc.htm」中，如果不是隻刪除live（）函數並使用Click（）函數。 –

在你的代碼的第一部分，嘗試：

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

傳遞「e」和調用e.preventDefault（）將阻止任何其他HTML運行（例如如果。 submit-reply被設置爲提交表單）。

來源

2011-09-08 19:55:01

jQuery - 在AJAX調用之後，舊的元素仍然存在於DOM中？如何刪除？

回答

相關問題