jQuery - AJAX呼び出しの後、古い要素はまだDOMに存在しますか？削除するには？

Question

AJAXを使用してrefreshFeed（）を呼び出してコンテンツを更新するボタンがあります。私はまだAJAXによって読み込まれたコンテンツを操作する必要があるので、AJAXがロードされたコンテンツのいくつかのリンクに.live（）を追加して、他のAJAX呼び出しを開始するようにします。 「コメント」ボタンは、非表示の入力フィールドからいくつかの値を収集し、それらをサーバに送信します。

リフレッシュをクリックしないとうまくいきます。しかし、いくつかのリフレッシュ後、.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のに新しいですし、実際には問題がどこにあるかわからない。ここで

はコードです。私を助けてください！ありがとうございました！

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

用//グローバル変数を.. ......編集.........

あなたの問題はライブ機能であると思います。 .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はフォームを送信するように設定されています）。