jQuery - после AJAX Call старые элементы все еще существуют в DOM? Как убрать?

Question

У меня есть кнопка для обновления содержимого с помощью AJAX, вызывающая refreshFeed ().Мне все еще нужно манипулировать контентом, загруженным AJAX, поэтому я добавил .live () к некоторым ссылкам в контенте, загруженном AJAX, чтобы инициировать другие вызовы AJAX, скажем, «Комментарий».Кнопка «Комментарий» собирает некоторые значения из скрытых полей ввода и публикует их на сервере.

Работает нормально, если я не нажимаю кнопку обновить.Однако я обнаружил, что после нескольких обновлений, когда я нажимаю ссылки, имеющие связь .live ('click', function () {}) (кнопка "comment"), он отправляет на сервер несколько запросов POST.Я думаю, это потому, что старые элементы DOM все еще существуют, поэтому я попытался удалить все элементы с помощью .remove (), .empty () в refreshFeed ().Но проблема остается.

Вот код:

$.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

В первой части вашего кода попробуйте:

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

Передача "e" и вызов e.preventDefault () предотвратит запуск любого другого HTML (если, например, .submit-reply настроен на отправку формы).

Answer 2

если ваши старые элементы отправили запрос, их можно остановить с помощью объекта запроса 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);
}