Динамическая загрузка содержимого (файлов) с помощью JQuery

Question

При попытке динамически загружать содержимое, используя jQuery.load() функцию он кажется, что если пользователь нажимает на ссылку в нав более чем один раз, чтобы заменить содержимое:

<div id="REPLACEMENT"></div> 

Все содержимое, загруженное ранее, сохраняется и добавляется новый контент. Кажется, что содержимое загружаемого файла на самом деле не «очищает» содержимое div перед добавлением нового контента. Я предполагаю это, потому что мои сценарии $ .on («click») работают несколько раз (столько раз, сколько пользователь нажал на ссылку навигации). Я попытался установить

$.remove 
$("REPLACEMENT").html("") 
$("#REPLACEMENT").empty(); 

не имеет смысла, проблема не устранена. Я обнаружил, что, если я использую альтернативные методы обнаружения кликов, у меня есть различные результаты:

$(".deleteBtn").click(function() { // Nothing happens. 
$(".deleteBtn").on("click", function() { // Nothing happens. 
$(document).on("click",".deleteBtn",function() { // Triggers, but multiple times. 

Я действительно застрял на этом! Любая помощь будет принята с благодарностью!

Вот копия паста моей замены кода, а также мой OnClick код:

// Enables the Archive, Reporting, and Error-Reporting links in the navigation. 
$(document).on("click", "li#archive, li#reporting, li#error-reporting", function() { 
    $("#REPLACEMENT").empty(); 
    $("#REPLACEMENT").load("modules/"+$(this).attr("id")+".html"); 
}); 

//////////////////////////////////////////////////////// 
//////////////////////////////////////////////////////// 
// Delete an archive 
//$(".deleteBtn").click(function() { 
//$(".deleteBtn").on("click", function() { 
$(document).on("click",".deleteBtn",function() { 
//alert('asdf'); 
    var Record = $(this).attr('id'); 
    bootbox.confirm("Are you sure?", function(result) { 
     if (result == true) { 
      $.ajax({ 
       type: "PUT", 
       url: APIUrl + 'DeleteArchive/' + Record, 
       success: function(data, textStatus, jqXHR){ 
        $("#TR_"+Record).remove(); 
       }, 
       error: function(jqXHR, textStatus, errorThrown, data){ 
        console.log("AJAX "+errorThrown+": - " + textStatus); 
        $("#ERROR_RESPONSE").html(data); 
        $("#ERROR_RESPONSE_GROUP").show(); 
       } 
      }); 
     } 
    }); 
}); 

Answer 1

Причина этого кода:

$(document).on("click",".deleteBtn",function() { 

и это

$(".deleteBtn").click(function() { 
$(".deleteBtn").on("click", function() { 

является просто потому, что содержимое динамически создается после загрузки страницы. Таким образом, вы должны использовать родителя, который не динамически создан. $(document) работает.

Теперь для реальной проблемы, которую вы испытываете

триггеров, но несколько раз

Попробуйте добавить это к вашему событию нажать и увидеть, если он фиксирует ее. Это не идеальное решение, но может помочь вам.

$(document).on("click",".deleteBtn",function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    .... 
    .... 
    .... 
}); 

[UPDATE] Вы подтвердили, что выше не работает, попробуйте следующее:

$(document).off().on("click",".deleteBtn",function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    .... 
    .... 
    .... 
}); 

И Попробуйте это: в .one пожаров событие только один раз.

$(document).one("click",".deleteBtn",function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    .... 
    .... 
    .... 
}); 

Answer 2

Как оказалось, этот вопрос у меня был обусловлен тем фактом, что HTML удаляется из DOM, используя $ .load(), но не являются. Прочитав более Michael Kenney's solution, я создал свой собственный. Вот копия/макаронные изделия:

Загрузите это в scripts.js, расположенном в вашей метатеге для «домашней» страницы.

//////////////////////////////////////////////////// 
// In an effort to clean up the pages as the user navigates around. 
var loadedPages = []; 
function LoadPage(url) { 

    $("#REPLACEMENT").load(url, function(responseTxt, statusTxt, xhr) { 
     if ($.inArray(url, loadedPages) == -1) { loadedPages.push(url); } 
     // console.log(loadedPages) 

     if(statusTxt == "error") { alert("Error: "+xhr.status+": "+xhr.statusText); } 
    }); 

} 

На каждой последующей странице, сделайте этот , прежде чем обработчики событий (клики).

$(document).ready(function(){ 
    if ($.inArray("modules/error-reporting.html", loadedPages) != -1) { 
     console.log("Page already loaded.") 
     return false; 
    } 
});