javascript - Joomla 3 和自定义 jQuery 函数 - 未定义函数

Question

我尝试在网络上搜索，但仍然无法理解为什么我的 jQuery 函数在 Joomla 中不起作用。

所以，我有OrionMenu我想将其集成到我的 Joomla 3 中。

作为一个独立的菜单，效果很好，但在尝试将其加载到 Joomla 中之后 - 每次我滚动菜单时，Chrome 的控制台都会显示:

Uncaught TypeError: undefined is not a function jquery-1.10.1.min.js:4
(anonymous function) jquery-1.10.1.min.js:4
n.event.special.(anonymous function).handle jquery.min.js:3
n.event.dispatch jquery.min.js:3
r.handle jquery.min.js:3

搜索后我发现Joomla以无冲突模式加载它自己的jQuery，所以我尝试以另一种方式集成OrionMenu，现在它说:

Uncaught TypeError: undefined is not a function (index):47
(anonymous function) (index):47
c jquery-1.10.1.min.js:4
p.fireWith jquery-1.10.1.min.js:4
x.extend.ready jquery-1.10.1.min.js:4
q

我的索引文件的第 47 行是:

jQuery(document).ready(function() { jQuery().orion({speed: 500}); });

我原来的 OrionMenu 包括如下所示:

<link href="templates/<?php echo $this->template; ?>/menu-orion/css/styles.css" rel="stylesheet">
<script type="text/javascript" src="templates/<?php echo $this->template; ?>/menu-orion/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        // $j is now an alias to the jQuery function; creating the new alias is optional.
        $j(document).ready(function() { $j().orion({speed: 500});});
</script>

在网上阅读了一些内容后，我将其更改为已经提到的返回控制台错误的代码段 - 索引第 47 行上未定义的函数

我不知何故相信 Joomla 的这段代码打破了一切。

  <script type="text/javascript">
     jQuery(window).on('load',  function() {
                new JCaption('img.caption');
     });
  </script>

但无论如何，帮助将是惊人的:)如果您知道如何实现或可能出现什么问题 jQuery(document).ready(function() { jQuery().orion({speed: 500} ); }); 那就太好了。

提前致谢!

Answer 1

好的，请确保您没有加载您自己的 jQuery 副本。您可以使用 Joomla 预装的版本。以下代码将确保仅在无冲突模式下导入一次:

<?php
    JHtml::_('jquery.framework');
?>

将上述代码放在模板中的任意位置，最好放在顶部，这样您就知道它在哪里。

然后尝试使用 Joomla 的内置方法将自定义 JS 添加到头部，如下所示:

$doc = JFactpry::getDocument();
$orion = ' jQuery(document).ready(function() { 
               jQuery().orion({
                   speed: 500
               }); 
           });
         ';
$doc->addScriptDeclaration($orion);

您可以将此代码放在我之前提到的导入 jQuery 的代码下面