如何调试jQuery/JavaScript冲突? [英] How to debug a jQuery / JavaScript conflict?

问题描述

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

I have two WebUsercontrols(.ascx) in my aspx page. One is for slide show and another one is for FullCalendar. Both are working fine while running Separately, but when I run both User controls in same page script conflict error occurs, as follows:

错误描述是:

脚本为:

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脚本之一不起作用.

I have tried for noConflict. If i use noConflict one of the script is not working.

推荐答案

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

在包含jQuery之后，您应该调用$ .noConflict().这将从全局名称空间中删除"$":

After including jQuery, you should call $.noConflict(). This will remove the "$" from the global namespace:

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

这时，如果要调用jQuery代码，则应使用$ j而不是$.或者，您可以通过将$符号包装在闭包中来达到目的

At this point, you should use $j instead of $ if you want to call jQuery code. Or you could use a trick by wrapping the $ symbol in a closure

<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>

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

Hope this helps..!!

快乐编码:)

这篇关于如何调试jQuery/JavaScript冲突?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！