我有一个包含 JQuery UI 选项卡小部件的网页。选项卡小部件通过 AJAX 加载选项卡。在其中一个选项卡页(将其命名为 DescriptionPage)中，我有一个将通过 ajaxForm 插件提交的表单。
<div id="tabs">
<ul>
<li>
<a href="DescriptionPage">Description Page</a>
</li>
</ul>
</div>
这是我的描述页面的内容。
<form id="myForm">
<!-- Form elements goes here -->
</form>
<script>
$(function(){
$('#myForm').ajaxForm(function (response) {
$('#myForm').parent().empty().append(response);
});
});
</script>
提交表单后，将返回相同的DescriptionPage，包括表单和脚本。因此表单内容被服务器端的响应所替换。响应还包含验证消息。
问题是，整个场景在 Chrome 和 Firefox 中运行良好。但在 Internet Explorer 8 中，出现了一个奇怪的问题。
首次加载选项卡时，JavaScript 会成功执行。当用户提交表单并放置响应时，IE 无法执行我的 javascript，并显示“JQuery 未定义”。
为什么 IE 在通过 ajax 加载的内容中调用 JQuery 失败？ 有解决办法吗？
P.S:我想将脚本与 html 分开，但这根本不是一个选项:(
P.S2:由于愚蠢的 IE，我的 javascript 和 CSS 文件变得一团糟。
最佳答案
这似乎在 Internet Explorer 6 中对我有用:
index.html:
<html><head></head><body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.form.js"></script>
<script>
jQuery('#container').load('DescriptionPage.html');
</script>
</body></html>
描述页面.html:
<form id="myForm">
<input type="submit" />
</form>
<script>
$(function() {
$('#myForm').ajaxForm(function(response) {
$('#myForm').parent().empty().append(response);
});
});
</script>
关于IE中通过ajax加载的部分 View 中jquery未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5359510/