jQuery 未定义（在 [Symfony] 模板环境中）答案

【问题标题】：jQuery is not defined (in [Symfony] templating environment)jQuery 未定义（在 [Symfony] 模板环境中）
【发布时间】：2011-01-06 19:25:57
【问题描述】：

我正在尝试显示一个使用 jQuery 的页面。页面中实现的 AJAX 功能不起作用。

我正在使用 FF 进行调试。当我查看控制台面板时，我看到以下错误：'jQuery 未定义'。啊，我认为这很简单——可能没有正确包含 jQuery 文件，或者没有找到等。所以我查看了 HTML 并单击了节点——你瞧，jQuery 脚本已经正确包含在页面中。

虽然引用 jQuery 的页面中的其他 js 库都没有使用“$”（如原型），但我在 jQuery 逻辑中调用了 noConflict() 方法，以防我以后使用冲突库阶段。

[编辑]

我认为问题与我在模板环境中使用 jQuery 的文件有关（准确地说是 Symfony 1.4）。对于那些不熟悉 Symfony 模板系统的人来说，本质上，视图模型由一个“布局”文件（模板）组成，然后被装饰（装饰器模式）以及其他信息位（我们称之为“页面内容” ）。

最后一页大概是这样的：

<html>
  <head>
  <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
  </head>
  <body>
   <!-- page contents go here -->
  </body>
</html>

我正在将 jQuery 加载到模板中（即 Symfony 术语中的“布局”）。

这样做的原因是 JQ 库是在客户端缓存的，并且可用于需要它的页面。动态页面（其内容进入布局的“页面内容”部分）将拥有自己的 jQuery 逻辑。这（使用下面 Mark Schultheiss 的答案中提供的“包装函数”想法），如下所示：

<script type="text/javascript">
/*<![CDATA[*/
jQuery(function()
{
 jQuery.noConflict();
 jQuery(document).ready(function(){
  jQuery("div.tpaccordion div.accItem").hide();
  jQuery("#latestVideosHolder").show();
  jQuery("div.tpaccordion h3").click(function(){
   jQuery(this).next().slideToggle("slow")
   .siblings("div.accItem:visible").slideUp("slow");
   jQuery(this).toggleClass("active");
   jQuery(this).siblings("h3").removeClass("active");
  });
 });
});
/*]]>*/
</script>

**[Edit2]**更正了语法错误。现在我回到了 jQuery is not defined 错误。 :(

【问题讨论】：

看起来你复制了 Mark Schultheiss 给出的代码中的语法错误——更改最后一个 )};进入 });
由于您使用的是 Firefox，因此可能值得使用 HttpFox 插件检查加载顺序。至少，当我过去遇到类似问题时，这对我有所帮助。除此之外，我们可能需要查看更多代码。
刚刚下载了 HttpFox - 发现它与 FF 3.5.7 不兼容 :( 有趣的是因为它声称可以与 (Firefox: 1.5 – 3.5.*) 一起使用

标签： jquery symfony1

【解决方案1】：

对我有用的是使用绝对引用而不是相对于脚本，尽管这对于不只从事内部 Web 项目的任何人来说都是一场安全噩梦。

【讨论】：

【解决方案2】：

它在加载脚本/DOM 之前运行。把 jQuery.noconflict();在 jquery 包装器中

jQuery(function()
{
  jQuery.noConflict(); 
});

如果您认为您可能需要保护自己：

  (function($)
    {
      $.noConflict(); 
    })(jQuery);

也可以

编辑：修正了一些语法错误

【讨论】：

jQuery.noConflict() 不打算从 dom-ready 事件处理程序中调用。它应该被称为内联。
您可能需要将$(function(){}) 更改为jQuery(function(){})。

【解决方案3】：

你应该在包含 jQuery 之后立即调用 jQuery.noConflict()：

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
/*<![CDATA[*/
jQuery.noConflict();
/*]]>*/
</script>

<!-- more javascript includes -->

【讨论】：

【解决方案4】：

将你的 jQuery 代码（如果你真的需要它，调用jQuery.noConflict()）包裹在下面的函数周围

$(function() { jQuery.noConflict(); ... });

并确保将其添加到您页面的<head> 部分。

【讨论】：

【解决方案5】：

jQuery 可能正在异步加载。例如，如果您使用如下所示的 Google Ajax API，则必须将任何依赖 jQuery 的代码封装在传递给 google.setOnLoadCallback() 的回调中：

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // Load jQuery (asynchronously)
  google.load("jquery", "1", { uncompressed: true });

  // Won't work -- jQuery is not necessarily loaded yet
  jQuery(function ($) {
    // Document-ready operations
  });

  // Must use the setOnLoadCallback
  google.setOnLoadCallback(function () {
    // jQuery is now loaded
    jQuery(function ($) {
      // Document-ready operations
    });
  });
</script>

或者，您可以通过在脚本标签中直接引用 jQuery 来避免异步加载：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

【讨论】：

【解决方案6】：

这是因为 99% 的情况下都没有加载 JQuery。

使用 Firebug 的“net”选项卡检查您的 JQuery 文件是否真正被加载。
另外，您可能会引用 JQuery 两次，我认为这可能会导致 JQuery 也消失。

如果这没有帮助，我建议您将 <script> 包含在您的问题中，就像在浏览器中出现的方式一样。

【讨论】：

【解决方案7】：

~~可能链接到外部 jQuery 是错误的？~~ 看来代码应该可以工作。尝试摆脱 CDATA 块 - 您可能不需要它。

【讨论】：

不应该有所作为...尤其是因为它们在 JavaScript cmets 中...