Jquery .load() - 如何从加载的内容中执行原始文档中的 Javascript
我有一个文档，它使用 JQuery 的 .load() 函数将一些内容加载到 div 中。然后，加载的内容尝试从原始文档执行 Javascript。这失败了，可能有明显的原因（我是一个 Javascript 新手）。这是说明我的问题的简化代码。
test.html：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
div {
background: #ccc;
margin: 15px;
height: 500px;
width: 500px;
border: 1px solid #666;
}
</style>
</head>
<body>
<a href="#" class="loader">Load content into box below</a>
<div id="loadbox"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$('a.loader').click(function() {
$('#loadbox').load('loadme.html');
});
$('a.alerter').click(function() {
alert("I've been clicked!");
});
});
</script>
</body>
</html>
loadme.html：
<a href="#" class="alerter">Click me</a> for an alert.
如果我将 Javascript 放入加载的内容中，则会触发警报，但我有一大块 Javascript，我想将其与多个充满加载内容的 div 一起使用，但我不希望继续加载 Javascript。有没有办法从加载的内容访问原始 HTML 中的 Javascript？我不太清楚事情的执行顺序，特别是当我将内容加载到页面中时。也许这就是我学习的机会吧！谢谢。
I have a document that loads some content into a div with JQuery's .load() function. That loaded content then tries to execute Javascript from the original document. This fails, possibly for obvious reasons (I am a Javascript novice). Here is simplified code that illustrates my problem.
test.html:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
div {
background: #ccc;
margin: 15px;
height: 500px;
width: 500px;
border: 1px solid #666;
}
</style>
</head>
<body>
<a href="#" class="loader">Load content into box below</a>
<div id="loadbox"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$('a.loader').click(function() {
$('#loadbox').load('loadme.html');
});
$('a.alerter').click(function() {
alert("I've been clicked!");
});
});
</script>
</body>
</html>
loadme.html:
<a href="#" class="alerter">Click me</a> for an alert.
The alert is triggered if I put the Javascript in the loaded content, but I have a large block of Javascript that I want to use with more than one div full of loaded content and I don't want to keep loading the Javascript. Is there a way to access the Javascript in the original HTML from the loaded content? I don't have a firm understanding of what order things are executed in, especially when I have loaded content into the page. Maybe this is my opportunity to learn! Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
D您应该使用 live() 或 delegate() 因为您要向文档添加一个元素（这适用于 jQuery < 1.7），
对于 jQuery > 1.7 您应该使用 on() 并将处理程序委托给主体
DYou should use live() or delegate() because you are adding an element to the document (this is for jQuery < 1.7)
for jQuery > 1.7 you should use on() and delegate the handler to the body
因为你加载的dom不在这里，脚本不可能找不到它； ，请尝试一下：
Because the dom u load is not here and the script can't not find it ; , plz try it :
替换
为
这会将事件委托给存在的
#loadbox，因此只要#loadbox存在，它就会工作。Replace
With
This will delegate the event to
#loadbox, which exists, so it will work as long as#loadboxexists.