在 IE 中通过 ajax 加载的部分视图中未定义 jquery答案

【问题标题】：jquery is undefined in the partial view loaded via ajax in IE在 IE 中通过 ajax 加载的部分视图中未定义 jquery
【发布时间】：2011-07-18 14:05:09
【问题描述】：

我有一个包含 JQuery UI 选项卡小部件的网页。选项卡小部件通过 AJAX 加载选项卡。在其中一个标签页（将其命名为 DescriptionPage）中，我有一个将通过 ajaxForm 插件提交的表单。

<div id="tabs">
    <ul>
        <li>
           <a href="DescriptionPage">Description Page</a>
        </li>
    </ul>
</div>

这是我的DescriptionPage的内容。

<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 文件变得一团糟。

【问题讨论】：

这不能解决问题，但您可以使用$('#myForm').parent().html(response);
有趣的是错误显示为“jQuery”，因为您在此处粘贴的代码根本不使用变量“jQuery”。它是否告诉您错误发生在哪个文件和行上？
感谢马克的回复。在 IE 中，存在使用 html(response) 进行预防的错误，这就是我顺序使用 empty() 和 append() 的原因。
我粘贴的代码是我页面的一个非常简化的版本，我不想用成千上万的 LOC 来打扰你。但我很确定 JQuery 在加载的局部视图（JS 调试工具）的脚本中是未定义的。
我使用的一种调试技术是采用简化版本的代码，就像您在上面粘贴的那样，并用它进行测试。你试过了吗？

标签： jquery ajax jquery-ui-tabs ajaxform

【解决方案1】：

这似乎适用于 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>

DescriptionPage.html：

<form id="myForm">
    <input type="submit" />
</form>

<script>
    $(function() {
        $('#myForm').ajaxForm(function(response) {
            $('#myForm').parent().empty().append(response);
        });
    });
</script>

【讨论】：

【解决方案2】：

试试这样的方法看看是否能解决问题：

<script>
  $(function(){
    $('#myForm').ajaxForm(function (response) {
      $('#myForm').empty().append($(response).children('form').html());
    });
  });
</script>

这应该做的是将现有表单的内容替换为响应中返回的元素的内容。而不是替换整个表单元素并再次执行 JS。它可能会解决您的问题。

【讨论】：

谢谢。但我必须再次重新执行 JS，以进行绑定等。例如：表单需要为每个响应绑定到 ajaxForm。

【解决方案3】：

你可以试试这样的：

<form id="myForm">
  <!-- Form elements goes here -->
</form>

<script>
  (function($){
    $('#myForm').ajaxForm(function (response) {
      $('#myForm').parent().empty().append(response);
    });
  })(jQuery);
</script>

使用这种方法，您可以将 $ 封装在函数中，并且不会与其他 js 框架混淆（如果您使用任何框架）。我不知道这是否适用于 IE，我无法对其进行测试，但希望它会:)

【讨论】：

【解决方案4】：

请参考：jQuery 1.6.1 , IE9 and SCRIPT5009: '$' is undefined

用户 id “Black”为我提供了正确的方向。

我在对话框上使用 .AjaxForm 进行上传。之后，我用另一个 AjaxForm 替换了那个表单。然后我遇到了“$未定义”或“jQuery未定义”的错误主要原因是我为第二个对话框应用了“render :layout => false”。这就是为什么所有的 js 库（包括 jQuery ）都没有正确加载的原因。

所以，在第二个对话框的部分，我必须添加。

【讨论】：

【解决方案5】：

如果您使用的是 IE，请确保您使用的是 jQuery 版本 1。IE 不支持 jQuery 版本 2....尽管地球上的其他一切都支持版本 2....

http://jquery.com/download/

【讨论】：

欢迎来到 StackOverflow。一些建议：考虑要求原始发布者提供更多信息，例如他正在使用的 jQuery 版本。另外，请在您的答案中更加准确，以便对其他读者有所帮助。（并非所有版本的 IE 都不支持 jQuery 2，也不是所有其他浏览器都支持它。）感谢您的贡献。