7

我有一个包含 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？有解决方法吗？

PS：我想将脚本与 html 分开，但这根本不是一个选择:(

P.S2：由于愚蠢的 IE，我的 javascript 和 CSS 文件变得一团糟。

4

5 回答 5

1

这在 Internet Explorer 6 中似乎对我有用：

索引.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>
于 2011-03-19T03:21:10.843 回答
1

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

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

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

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

于 2012-06-18T08:24:23.540 回答
0

尝试这样的事情，看看它是否能解决问题：

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

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

于 2011-03-24T21:43:08.947 回答
0

你可以尝试这样的事情：

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

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

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

于 2011-03-29T02:03:51.943 回答
0

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

http://jquery.com/download/

于 2013-09-17T20:06:14.243 回答