javascript - div中动态加载html不允许交互

Question

我有一个主 html 页面，它使用 jQuery 将其他 html 页面加载到 div 中。像这样:

$('.controlPanelTab').click(function() {
    $(this).addClass('active').siblings().removeClass('active');

    var name = $(this).attr('name');

    //create the html doc name + append it to the displayPanel Div
    var docName = name + ".html";
    $("#displayPanel").load(docName);

});

页面显示正确，引用了正确的样式表等。到目前为止一切顺利。

但是，在与加载的页面(div 内)交互时会出现问题。例如，加载的页面之一有一个文本区域，该区域专注于点击，但不允许输入文本。另一个页面使用 jQuery 在屏幕上显示一些统计数据的动画。直接在 URL 栏中访问该页面会显示正确的统计动画，但是一旦使用上述方法加载到 div 中，就不会出现动画。

就好像主页无法识别加载的页面，因为它设置得太晚了，也许一开始就一次性加载所有内容可以解决这个问题。但如果可能的话，我更愿意采用延迟加载方法，并将这些“子”html 页面分开。

是否有任何方法可以刷新主页(DOM？)，以便它正确识别新元素(如果这确实是问题)？

编辑 有效的代码:

$(document).on('click', '.controlPanelTab', function() {

$(this).addClass('active').siblings().removeClass('active');

var name = $(this).attr('name');

//create the html doc name + append it to the displayPanel Div
var docName = name + ".html";
$("#displayPanel").load(docName);

//create external .js file name and call it up
docName = name + ".js";
$.getScript(docName, function( data, textStatus, jqxhr ) {

    if (textStatus==="success") {
            lightItUp(); //load method
    }
});
});

Answer 1

您需要重新加载新加载的 .html 文件中引用的 js 脚本；我也遇到了这个问题，我使用 $.getScript() API 重新加载 JS 脚本。 load() 有成功处理程序，您可以按如下方式使用-->

$('#Target').load(docName, function(data, status, xhr) {
if( status === 'success' ) 
{                        
    $.getScript("JSFileName", function(data, textStatus, jqxhr) 
    {          
    }
}