使用jQuery动态加载内容(文件)

Question

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

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

所有以前加载的内容保持不变，并添加新内容。在添加新内容之前，我正在加载的文件的内容似乎并没有真正“清除”div的内容。我假设这是因为我的$.on(“单击”)脚本都运行了多次(与用户单击nav链接的次数一样多)。我试过

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