Jquery 代码在 Joomla 中不起作用，尝试了在 google 上找到的所有内容答案

【问题标题】：Jquery codes dont work in Joomla, tried everything found on googleJquery 代码在 Joomla 中不起作用，尝试了在 google 上找到的所有内容
【发布时间】：2013-05-08 20:29:49
【问题描述】：

我想用 span 包装我的 img 并将图像设置为 span 的背景图像，这样我就可以对图像做一些 css 技巧。我找到了这段代码

<script type="text/javascript">
$(document).ready(function(){

    $("img").load(function() {
        $(this).wrap(function(){
            return '<span class="image-wrap ' + $(this).attr('class') + '"'+'style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
        });
        $(this).css("opacity","0");
    });
});
</script>

它在单个 html 文件中运行良好。但是，当我将此代码添加到我的 ~/template/index.php 时，它不起作用并且浏览器报告：

Uncaught TypeError: Object # has no method 'ready'

似乎 Jquery 没有正确加载，我尝试将以下代码添加到我的 index.php：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

还尝试安装 Jquery Easy 插件并启用它，但它们都不起作用。

怎么了？

【问题讨论】：

见this question 听起来情况类似。
您能否提供指向您网站的链接，否则请检查是否正在导入 2 个 jquery 文件，因为这可能会导致冲突
哪个 Joomla!你用的是什么版本？

标签： jquery joomla

【解决方案1】：

在这里查看类似的问题/解决方案：
Joomla Jquery not working, why is that?

您可以在模板中添加这样的 jquery -

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/YOUR_TEMPLATE_NAME/PATH_TO_JAVASCRIPT_FOLDER/YOUR_JQUERY.js"></script>

YOUR TEMPLATE - Name of you template
PATH TO JAVASCRIPT FOLDER - If any folder present then the path of the folder
YOUR JQUERY.js - Finally the file name which one you want to include.

【讨论】：

gwww...我尝试了所有方法..没有任何效果。我尝试使用您给我的代码，我尝试用 jquery 替换 $，但它仍然报告“未捕获的引用错误：未定义 jquery”
它默认使用 mootools。也许你有冲突。这里有 3 个帖子解决了这个问题：stackoverflow.com/q/13040218/1807551、stackoverflow.com/q/1329981/1807551、stackoverflow.com/q/2810399/1807551
你试过用 jQuery（不是 jquery）替换 $ 吗？检查大小写
这终于奏效了：var $j = jQuery.noConflict();在jquery代码之前添加上面的代码并将$替换为$j

【解决方案2】：

你可以在页面中添加这样的jquery -

$document->addScriptDeclaration(" //

$(document).ready(function()
{
    $("img").load(function(){
    $(this).wrap(function(){
        return '<span class="image-wrap ' + $(this).attr('class') + '"'+'style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
});

});

//]]>

");

你也可以在模板索引页面中像这样声明 jquery -

baseurl ?>/templates/template;?>/你的 JS 文件夹/你的 Java Script.js">

【讨论】：