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

时间:2014-12-23 17:19:20

标签: javascript jquery html dynamic

尝试使用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();
                }
            });
        }
    });
});

2 个答案:

答案 0 :(得分:0)

此代码的原因:

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

答案 1 :(得分:0)

事实证明,我遇到的问题是因为使用$ .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;
    }
});