如何调试 jQuery / JavaScript 冲突？答案

【问题标题】：How to debug a jQuery / JavaScript conflict?如何调试 jQuery / JavaScript 冲突？
【发布时间】：2014-05-15 04:45:53
【问题描述】：

我的 aspx 页面中有两个 WebUsercontrols(.ascx)。一个用于幻灯片放映，另一个用于 FullCalendar。分别运行时两者都工作正常，但是当我在同一页面运行两个用户控件时发生脚本冲突错误，如下所示：

错误描述是：

脚本是：

SlideShow.ascx

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    function pageLoad(sender, args) {

        var $slides = $('.slide'),
         slideWidth = $slides.width(),
         numberOfSlides = $slides.length,
         speed = 5000,
         $holder = $slides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $holder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $holder.css('marginLeft', 0).children().first().appendTo($holder);
            });
        }

    }
</script>

FullCalendar.ascx

<script src="http://code.jquery.com/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="../Styles/fullcalendar.min.js" type="text/javascript"></script>
<script src="../Scripts/calendarscript.js" type="text/javascript"></script>

我试过noConflict。如果我使用noConflict，其中一个脚本不起作用。

【问题讨论】：

你不应该首先包含两个版本的 jquery
@AmitJoki 排名第一？

标签： javascript jquery asp.net vb.net

【解决方案1】：

删除后尝试运行：../Scripts/jquery-1.4.1.js

如果它工作，那么好的，否则

试着把它放在页面底部

<script type="text/javascript">
    function pageLoad(sender, args) {

        var $slides = $('.slide'),
         slideWidth = $slides.width(),
         numberOfSlides = $slides.length,
         speed = 5000,
         $holder = $slides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $holder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $holder.css('marginLeft', 0).children().first().appendTo($holder);
            });
        }

    }
</script>

使用 <script>jQuery.noConflict();</script> 并将 jquery 替换为 $

【讨论】：

将该脚本放在页面底部的

【解决方案2】：

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

在包含 jQuery 之后，您应该调用 $.noConflict()。这将从全局命名空间中删除“$”：

<script language="javascript">
    var $j = jQuery.noConflict();
</script>

此时，如果你想调用 jQuery 代码，你应该使用 $j 而不是 $。或者你可以通过将 $ 符号包装在闭包中来使用技巧

<script type="text/javascript">
    function pageLoad(sender, args) {

        var $jslides = $j('.slide'),
         slideWidth = $jslides.width(),
         numberOfSlides = $jslides.length,
         speed = 5000,
         $jholder = $jslides.wrapAll('<div id="slidesHolder"></div>').css('float', 'left').parent().width(slideWidth * numberOfSlides);

        setInterval(changePosition, speed);

        function changePosition() {
            $jholder.animate({
                'marginLeft': 0 - slideWidth
            }, function () {
                $jholder.css('marginLeft', 0).children().first().appendTo($jholder);
            });
        }

    }
</script>

希望这会有所帮助..!!

快乐编码:)

【讨论】：