原型和 jQuery UI 干扰答案

【问题标题】：Prototype and jQuery UI interference原型和 jQuery UI 干扰
【发布时间】：2013-08-07 13:20:45
【问题描述】：

好的，所以我已经研究了一段时间，并重新排序了我的 javascript 文件，谁知道多少次。我知道 Prototype 和 jQuery 不能很好地相互配合。但是，我的 jQuery 可以工作，但我的 jQuery UI 函数却没有。

我按以下顺序列出我的 js 文件： -原型.js -jquery.js - jquery-ui.js - jquery-noconflict.js

我的 jQuery 无冲突文件如下所示：

jQuery.noConflict();

好的，所有这些垃圾都在标签中。稍后在一个页面中，我正在这样做：

<div class="product_tabs clearfix">
    <ul>
        <?php if ($_description): ?> <li><a href="#tabs-1"><?php echo $this->__('Details') ?></a></li> <?php endif; ?>
        <li><a href="#tabs-2">Review</a></li>
        <li><a href="#tabs-3">Tags</a></li>
    </ul>
    <div class="std clearfix">
        <?php if ($_description): ?> <div id="tabs-1"><?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?></div> <?php endif; ?>
        <div id="tabs-2">
            <div class="row">
                <div class="span5"><?php echo $this->getChildHtml('review_form') ?></div>
                <div class="span4"><?php echo $this->getChildHtml('reviews') ?></div>
            </div>
        </div>
        <div id="tabs-3"><?php echo $this->getChildHtml('product_tag_list') ?></div>
    </div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.product_tabs').tabs();
    });
</script>

这已经坏了.. 但是，我的 main.js 文件在我的 noconflict 文件之前调用，但在我的 js 和原型文件使用与上述函数相同的 ready() 与我的下拉导航一起工作之后。

但是，我将该 tabs() 函数移到 main.js 文件中，但在从页面中删除它时它仍然不起作用。有没有人可以解决这个问题？

我删除了使用 tabs() 函数的页面上的 noconflict 并且它工作正常，但 IE8 及以下版本没有。所以这不是一个有价值的解决方案......这是我能想到的唯一一个。

而且我必须保留原型，因为我使用的是 Magento CMS！

【问题讨论】：

标签： jquery jquery-ui magento prototypejs

【解决方案1】：

你应该使用 $ 作为原型函数，使用 jQuery 作为 jQuery，像这样：

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.product_tabs').tabs();
});
</script>

【讨论】：

哦，我忘了说。我也试过了，它仍然不能正常工作。 jQuery UI 类被添加到选项卡中，但功能不存在.. 编辑 - 等等......它正在工作。 o.o 我的 CSS 没有被应用。 xD 哇...我很喜欢他们看起来不像以前的样子，所以即使没有测试它也无法正常工作。天哪，谢谢... o.o 我太瞎了。我试过了，太固执了，无法检查。

【解决方案2】：

请尝试在最顶部（即原型之前）加载 jQuery，并在 jquery 文件的末尾写上jQuery.noconflict()。然后用jQuery(document).ready(function($){...});初始化你的jQuery代码。

【讨论】：