Question

尝试使用jQuery.load（）函数动态加载内容时，如果用户多次单击导航中的链接以替换以下内容：

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

所有以前加载的内容仍然存在，并添加了新内容。似乎我加载的文件的内容实际上并不是＆＃34;清除＆＃34;添加新内容之前div的内容。我假设这是因为我的$ .on（＆＃34; click＆＃34;）脚本都运行了多次（用户单击导航链接的次数）。我试图

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

[更新]您确认以上操作无效，请尝试以下操作：

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

并尝试此操作：.one仅触发一次事件。

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

Answer 2

事实证明，我遇到的问题是因为使用$ .load（）从DOM中删除了HTML，但事实并非如此。阅读Michael Kenney's solution后，我制作了自己的作品。这是副本/意大利面：

将此加载到位于元素中的scripts.js中，用于＆＃34; home＆＃34;页。

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

}

在每个后续页面上，执行 BEFORE 您的事件处理程序（点击）：

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

使用jQuery动态加载内容（文件）

2 个答案: