jQuery 和 Mootools 冲突答案

【问题标题】：jQuery and Mootools conflictjQuery 和 Mootools 冲突
【发布时间】：2011-07-21 16:47:52
【问题描述】：

我知道有很多关于 hot to use jQuery with mootools 的帖子，但我做错了。

原头MooTools + jQuery：

<head>
<?php css(); ?>
<meta name="viewport" content="width=device-width" />
<meta content="text/html; charset=<?php print $this->getConfig('charset'); ?>" http-equiv="content-type" />
<?php
if(($this->getConfig('log_file') != null && strlen($this->getConfig('log_file')) > 0)
    || ($this->getConfig('thumbnails') != null && $this->getConfig('thumbnails') == true && $this->mobile == false))
{ 
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livadi.gr/ib/sources/js/mootools.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {
<?php
    if($this->logging == true)
    { 
?>
        function logFileClick(path)
        {
             $.ajax({
                    async: false,
                    type: "POST",
                    data: {log: path},
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    cache: false
                });
        }

        $("a.file").click(function(){
            logFileClick("<?php print $this->location->getDir(true, true, false, 0);?>" + $(this).html());
            return true;
        });
<?php 
    }
    if(EncodeExplorer::getConfig("thumbnails") == true && $this->mobile == false)
    {
?>
        function positionThumbnail(e) {
            xOffset = 30;
            yOffset = 10;
            $("#thumb").css("left",(e.clientX + xOffset) + "px");

            diff = 0;
            if(e.clientY + $("#thumb").height() > $(window).height())
                diff = e.clientY + $("#thumb").height() - $(window).height();

            $("#thumb").css("top",(e.pageY - yOffset - diff) + "px");
        }

        $("a.thumb").hover(function(e){
            $("#thumb").remove();
            $("body").append("<div id=\"thumb\"><img src=\"?thumb="+ $(this).attr("href") +"\" alt=\"Preview\" \/><\/div>");
            positionThumbnail(e);
            $("#thumb").fadeIn("medium");
        },
        function(){
            $("#thumb").remove();
        });

        $("a.thumb").mousemove(function(e){
            positionThumbnail(e);
            });

        $("a.thumb").click(function(e){$("#thumb").remove(); return true;});
<?php 
    }
?>
    });
//]]>                
</script>
<?php 
}
?>
<title><?php if(EncodeExplorer::getConfig('main_title') != null) print EncodeExplorer::getConfig('main_title'); ?></title>
</head>

现在我已经输入了jQuery.noConflict(); 并将$ 替换为jQuery。在那之后，MooTools 不是由 jQuery 工作的。

标题有一些变化：

<head>
<?php css(); ?>
<meta name="viewport" content="width=device-width" />
<meta content="text/html; charset=<?php print $this->getConfig('charset'); ?>" http-equiv="content-type" />
<?php
if(($this->getConfig('log_file') != null && strlen($this->getConfig('log_file')) > 0)
    || ($this->getConfig('thumbnails') != null && $this->getConfig('thumbnails') == true && $this->mobile == false))
{ 
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livadi.gr/ib/sources/js/mootools.js"></script>
<script type="text/javascript">
//<![CDATA[
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff

jQuery(document).ready(function() {
<?php
    if($this->logging == true)
    { 
?>
        function logFileClick(path)
        {
             jQuery.ajax({
                    async: false,
                    type: "POST",
                    data: {log: path},
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    cache: false
                });
        }

        jQuery("a.file").click(function(){
            logFileClick("<?php print $this->location->getDir(true, true, false, 0);?>" + $(this).html());
            return true;
        });
<?php 
    }
    if(EncodeExplorer::getConfig("thumbnails") == true && $this->mobile == false)
    {
?>
        function positionThumbnail(e) {
            xOffset = 30;
            yOffset = 10;
            jQuery("#thumb").css("left",(e.clientX + xOffset) + "px");

            diff = 0;
            if(e.clientY + $("#thumb").height() > $(window).height())
                diff = e.clientY + $("#thumb").height() - $(window).height();

            jQuery("#thumb").css("top",(e.pageY - yOffset - diff) + "px");
        }

        jQuery("a.thumb").hover(function(e){
            jQuery("#thumb").remove();
            jQuery("body").append("<div id=\"thumb\"><img src=\"?thumb="+ $(this).attr("href") +"\" alt=\"Preview\" \/><\/div>");
            positionThumbnail(e);
            jQuery("#thumb").fadeIn("medium");
        },
        function(){
            jQuery("#thumb").remove();
        });

        jQuery("a.thumb").mousemove(function(e){
            positionThumbnail(e);
            });

        jQuery("a.thumb").click(function(e){$("#thumb").remove(); return true;});
<?php 
    }
?>
    });
//]]>                
</script>
<?php 
}
?>
<title><?php if(EncodeExplorer::getConfig('main_title') != null) print EncodeExplorer::getConfig('main_title'); ?></title>
</head>

【问题讨论】：

还有很多你用$调用的jQuery函数
确实如此。只需在$( 上执行 Ctrl+F。在以后的问题中，请不要像小孩子一样大喊大叫并引起注意。只需以聪明的方式提出问题。您的问题（和标题）已被清理。

标签： jquery mootools conflict

【解决方案1】：

试试这个...

如果你在 joomla 中使用 mootools 会与 JQuery 冲突。这样 JQuery 就不起作用了。

首先需要安装 SC System JQuery 插件。

http://webappgenerator.com/releases/plg_system_scjquery

并为 JQuery 使用以下代码。

var j = jQuery.noConflict();

将 $ 符号替换为 (JQuery) 关键字

然后你将使用 jquery。

【讨论】：

【解决方案2】：

试试

var j = jQuery.noConflict();

然后在你自己的库调用中使用 j 而不是 jQuery。

您还可以像这样封装所有使用 jQ 的自己的代码：

(function($){
  // all your jquery code, use $ without compunction!!

}(jQuery);

【讨论】：