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

Question

I have a button to refresh the content using AJAX, calling refreshFeed(). I still need to manipulate the content loaded by AJAX so I appended .live() to some links in the AJAX-loaded content to initiate other AJAX calls, let's say "Comment". "Comment" button gather some values from the hidden input fields and post them to server.

It works fine if I don't click refresh. However, I found that after several refreshes, when I click the links that have .live('click', function(){}) bond (The "comment" button), it will send multiple POST requests to server. I guess it's because the old DOM elements still exist, so I tried to remove all elements using .remove(), .empty() in refreshFeed(). But the problem remains.

Here is the code:

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

I am new to Jquery and really don't know where the problem is. Please help me! Thank you!

Answer 1

if your old elements have sent request those can be stopeed by using ajax request object. you can use ajax request object.

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

}

and if you have sevaral ajax requests you can use an array of ajax requests

$.xhrPool = [];//global variable for array

$.xhrPool.abortAll = function() {  
  _.each(this, function(jqXHR) {
    jqXHR.abort();
  });
};
$.ajaxSetup({
  beforeSend: function(jqXHR) {
    $.xhrPool.push(jqXHR);
  }
});

........EDIT.........

I think your problem is with live function. I assume that your .submit-reply is in pbsc.htm so instead of using live function try this code. This will

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

In the first part of your code, try:

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

passing in "e" and calling e.preventDefault() will prevent any other HTML from running (if for example .submit-reply is set to submit a form).