jquery noConflict问题

Question

我正在尝试使用Lightbox插件，但是jquery存在冲突并经历了一些文章，并找到了解决这个问题，但我没有运气实现它。

这是我的代码： 参考文献：

<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder">    </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>

脚本：

<script type="text/javascript">
    jQuery.noConflict();
    (function ($) {
        $(document).ready(function () {
            $("a[rel=lightbox[group1]]").live("click", function () {
                $("a[rel^='lightbox[group1]']").lightbox();
                return false;
            });
        });
    })(jQuery);
</script>

任何帮助将不胜感激！

我正在使用jquery 1.5.2版本

Answer 1

为了防止jQuery和prototype之间发生$冲突，您必须在包含jQuery之后以及在期望jQuery.noConflict();属于另一个库的任何其他代码之前放置$。然后，一旦你完成了，$将不会映射到jQuery，它将被其他库使用。

您没有展示如何包含jQuery。以下是.noConflcit() <script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.noConflict(); jQuery(document).ready(function($) { // Code that uses jQuery's $ can follow here. }); // Code that uses other library's $ can follow here. </script> 的一个示例：

<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder">    </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    (function ($) {
        $(document).ready(function () {
            $("a[rel=lightbox[group1]]").live("click", function () {
                $("a[rel^='lightbox[group1]']").lightbox();
                return false;
            });
        });
        // other jQuery code that uses $ can go here
    })(jQuery);
    // other jQuery code that uses jQuery (but not $) can go here or in other script tags
</script>

在您的情况下，我认为您的代码将是这样的：

jQuery.noConflict()

包含js文件与调用{{1}}相关的顺序至关重要。

Answer 2

一切看起来都正确，所以我认为jQuery没有加载？ 如果使用jQuery代替$不起作用，则可能就是这种情况。

如果你的网站标题中有jQuery脚本，你需要检查FireBug的网络控制台是否加载 - 谷歌浏览器还有一个很好的网络监视器你可以使用。

你也可以使用jQuery lightbox而不是引入原型库只是为了使用一个插件。

Answer 3

您可以尝试使用jQuery对象而不是$：

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("a[rel=lightbox[group1]]").live("click", function () {
            jQuery("a[rel^='lightbox[group1]']").lightbox();
            return false;
            });
    });
</script>