Jquery and prototype noconflict

问题

I got an conflict between jquery and prototype.

HTML 

<!DOCTYPE html>
<html>
    <head>
        <title>Nor-Avetisyan</title>
        <link rel="stylesheet" type="text/css" href="views/css/style.css" />
        <link rel="stylesheet" href="views/css/calendarview.css">
        <script src="views/js/jquery-2.0.1.min.js"></script>
        <script>jQuery.noConflict();</script>
        <script src="views/js/prototype.js"></script>
        <script src="views/js/calendarview.js"></script>
        <script>
            function setupCalendars() {
                // Embedded Calendar
                Calendar.setup(
                        {
                            dateField: 'embeddedDateField',
                            parentElement: 'embeddedCalendar'
                        }
                )

                // Popup Calendar
                Calendar.setup(
                        {
                            dateField: 'popupDateField',
                            triggerElement: 'popupDateField'
                        }
                )
            }

            Event.observe(window, 'load', function() {
                setupCalendars()
            })
        </script>
    </head>
    <body>
        <div id="site-page">
            <div id="site-under-header">
                <a class="flag-arm" href="#"></a>
                <a class="flag-en" href="#"></a>
                <div class="clear"></div>
            </div>
            <div id="site-header">
                <div id="site-header-center"></div>
            </div>
            <div id="site-content-container">
                <div id="site-menu">
                    <a id="menu-glxavor" href="#"></a>
                    <a id="menu-mermasin" href="#"></a>
                    <a id="menu-usucich" href="#"></a>
                    <a id="menu-ashakert" href="#"></a>
                    <a id="menu-shrjanavartner" href="#"></a>
                    <a id="menu-norutyunner" href="#"></a>
                    <a id="menu-mankapartez" href="#"></a>
                    <a id="menu-nyuter" href="#"></a>
                    <a id="menu-bajanortagrvel" href="#"></a>
                </div>
                <div id="site-content">
                    <div id="site-content-left">
                        <h1>ՆՈՐ ԿԱՌՈՒՑՎՈՂ ԴՊՐՈՑԱՇԵՆՔ</h1>
                        <div id="site-content-dproc">
                            <div id="corner-calq"><div><a href="#">Ավելին</a></div></div>
                        </div>
                    </div>
                    <div id="site-content-right">
                        <div id="embeddedExample" style="">
                            <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
                            </div>
                        </div>
                        <div id="site-content-ushadrutyun">
                            Հատուկ ուշադրության 
                            արժանի
                            հայտարարությունների
                            նյութերի համար
                        </div>
                    </div>
                    <div style="clear:left;"></div>
                    <div id="site-content-news">
                        <h1>ՆՈՐՈՒԹՅՈՒՆՆԵՐ</h1>
                        <div class="site-news-grey">
                            1
                        </div>
                        <div class="site-news-grey">
                            2
                        </div>
                        <div class="clear"></div>
                        <div class="site-news-grey">
                            3
                        </div>
                        <div class="site-news-grey">
                            4
                        </div>
                    </div>
                    <div id="site-content-social">
                        <a id="social-twitter" href="#"></a>
                        <a id="social-youtube" href="#"></a>
                        <a id="social-facebook" href="#"></a>
                        <a id="social-google" href="#"></a>
                        <a id="social-dasaran" href="#"></a>
                    </div>
                </div>
                <div class="clear"></div>
                <a id="kap" href="#"></a>
                <div id="site-footer">
                    <div>
                        «Հայ կրթություն» կրթական հիմնադրամ
                        Երևան Հարավ-Արևմտյան Ա1 թաղամաս, Օհանով 20  Հեռ. 72 84 40
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#corner-calq').hide();
            $('#site-content-dproc').mouseover(function() {
                $('#corner-calq').fadeIn(1000);
            });
            $('#site-content-dproc').mouseout(function() {
                $('#corner-calq').fadeOut(1000);
            });
        </script>
    </body>
</html>

Console Error: Uncaught TypeError: Cannot call method 'hide' of null

I have put the jQuery.noConflict(); but no effect.

Can you post any solutions for this?

回答1:

jQuery.noConflict() is not some magic dust that by some mysterious forces remove the conflicts between the libraries. Its purpose is quite clear: 1) restore the original value of $ global variable, and, optionally, 2) introduce another alias to be used instead of jQuery.

What you might need to do is the following:

<script src="views/js/prototype.js"></script>
<script src="views/js/jquery-2.0.1.min.js"></script>
<script>var jQ = jQuery.noConflict();</script>

Then you can use this jQ variable like you were using $:

jQ('#corner-calq').hide();
jQ('#site-content-dproc').mouseover(function() {
    jQ('#corner-calq').fadeIn(1000);
});
jQ('#site-content-dproc').mouseout(function() {
    jQ('#corner-calq').fadeOut(1000);
});

Although I'd probably prefer leaving the code as is, instead scoping it within a self-calling anonymous function.

(function($) {
    $('#corner-calq').hide();
    $('#site-content-dproc').mouseover(function() {
        $('#corner-calq').fadeIn(1000);
    });
    $('#site-content-dproc').mouseout(function() {
        $('#corner-calq').fadeOut(1000);
    });
})(jQuery);

来源：https://stackoverflow.com/questions/16871278/jquery-and-prototype-noconflict

标签

html

prototypejs

jquery