javascript - 动态加载 HTML/Javascript

Question

我有一个 index.html 页面，我想使用 jQuery 将另一个页面的内容动态加载到 index.html。我使用 $.load() 函数来执行此操作:

$('#dynamic_content').load('another.html #toLoad')

它工作正常，但我还需要加载使用 another.html 的 javascript 文件，所以我这样做:

$('#dynamic_content').load('another.html #toLoad');
$.getScript('js/another.js');

问题是 'another.js' 的 js 代码有时不会 'apply' 到 html 页面(可能它加载早于 html 页面) another.js 的内容:

$(document).ready(function {} {

   $('#cancelButton').click(function() {
       //do something 

});

});

Answer 1

使用成功回调:

$('#dynamic_content').load('another.html #toLoad', function() {
    $.getScript('js/another.js');
});

这样，如果 another.js 操作从 another.html 动态加载的内容，将保证该内容已经被注入(inject)到当前的 DOM 树中。