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() 有success-handler，你可以使用如下-->

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

Answer 2

您可能想要替换：

$('.controlPanelTab').click(function() {

与

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

参考：https://api.jquery.com/on/