当.load()方法完成并且DOM更新时，jQuery提供了一个回调函数。这是您想要对从外部url插入的元素进行操作的地方。
背景故事
我正在创建一个web应用程序，其中通过jQuery.load函数"加载"各个页面。最初加载的页面是一个单独的文件，但随着时间的推移，我决定将其拆分为.html文件、.css文件和.js文件。
奇怪的是，在css中使用百分比值定位的元素周围出现了一个设计缺陷。为了查看我在移动时是否修改了样式，我替换了style标记(而省略了link标记)，它运行良好。第四次和第四次，我了解到只有当我使用link标签而不是通过style标签嵌入它时，它才会严格发生。
我想使用link标签，所以我试图缩小问题范围。经过一段时间的摆弄，我找到了.js文件，特别是$(document).ready上.focus函数的用法。如果我评论掉.focus，一切都很好。不和解，它就破裂了。
这似乎只在Chrome中发生。它不会出现在FF26或IE11中。
示例
小提琴。
请注意，该问题仅发生在Chrome中，并且必须禁用缓存。由于Chrome的临时缓存禁用不会扩展到iframe中的iframe，因此直接的结果更容易处理。
<script>
$(document).ready(function() {
$('#content').load('html/portal.html', function() {
//now i can operate on elements loaded from html/portal.html
//they have been inserted into the DOM
$('input#input').focus();
})
});
</script>
至于对链接元素的引用，如果你想使用javascript从外部url动态加载样式表，你可以使用这样的javascript函数：
//load deferred stylesheets
function loadStyleSheet(src) {
if (document.createStyleSheet) {
document.createStyleSheet(src);
} else {
$("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
}
}
如果你想加载一个外部javascript文件，你可以使用jQuery.getScript():
jQuery.getScript('/js/external.js');
因此，将所有这些放在一起，如果您想从外部资源加载一些内容，请将其插入DOM，然后加载外部样式表和外部javascript资源，您可以按如下方式执行：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
//function to load a deferred stylesheets
var loadStyleSheet = function(src) {
if (document.createStyleSheet) {
document.createStyleSheet(src);
} else {
$("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
}
}
$('#someWrapper').load('external-url.html #someWrapper > *', function() {
loadStyleSheet('/css/external.css');
jQuery.getScript('/js/external.js');
})
});
</script>
</head>
<body>
<div id="someWrapper">
<!-- external content is loaded here -->
</div>
</body>
</html>