jQuery冲突,可能存在引导程序问题

jQuery conflict, possible bootstrap issue?

本文关键字:存在 引导程序 问题 冲突 jQuery      更新时间:2023-09-26

我试图运行的某些jQuery出现问题。我正试图在我的引导应用程序中实现这一点:

http://jsfiddle.net/YG6k6/

然而,当我试图在引导应用程序中实现这一点时,我会遇到一系列错误,例如:

Uncaught TypeError: Cannot call method 'fadeIn' of null index.php:108
Uncaught TypeError: Cannot call method 'animate' of null index.php:109

我尝试了几种方法来解决这个问题,但都没有成功。如果有任何帮助的话,我正在使用jquery/1.10.1/。

编辑:

这是我页脚中的代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('#iphone-img').mouseover(function(){
                $('.main-content-box').fadeIn(600).show(); //on mouse enter show div
            });
                $('#iphone-img').mouseleave(function(){
                    $('.main-content-box').animate({opacity: 'toggle'}, 'slow'); 
                });
        });
    </script>
    <script src="js/bootstrap.js"></script>
    <script type='text/javascript' src='js/lib/prototype.js'></script>
    <script type='text/javascript' src='js/lib/raphael.js'></script>
    <script type='text/javascript' src='js/lib/highlight.js'></script>
    <script type='text/javascript' src='js/analytics.js'></script>
    <script type="text/javascript">
        $(function () {
            $('#info-tabs').tab('show');
        });
        $(function(){
            $('#pop-info').tooltip('hide');
        });
        $(function(){
            $('#videoModal').modal('hide');
        });
    </script>
    <script type='text/javascript'>
        function onLoad(){
            Element.observe(window,'load', function(){
            var w = 840;
            var h1 = Raphael('beautiful-line-chart1', w, 250);
            var h2 = Raphael('beautiful-line-chart2', w, 250);
            //var h3 = Raphael('beautiful-line-chart3', w, 250);
            //var h4 = Raphael('beautiful-line-chart4', w, 250);
            /* Line Chart 2; table_id:e3 tbody-class: line_e3 table_id:e33 */
            drawLine({
                holder: h1,
                data_holder: 'd2',
                mastercolor: '#01A8F0',
                spewidth: w,
                showarea: true,
                mousecoords: 'circle',
                nodot: true
            });
            drawLine({
                holder: h1,
                data_holder: 'd1',
                mastercolor: '#666',
                spewidth: w,
                showarea: true,
                mousecoords: 'circle',
            });
            drawLine({
                holder: h2,
                data_holder: 'e3',
                mastercolor: '#555',
                spewidth: w,
                showarea: false,
                mousecoords: 'circle',
                gridcolor: '#333333',
                nodot: true
            });
            drawLine({
                holder: h2,
                data_holder: 'e3',
                mastercolor: '#8dd916',
                spewidth: w,
                showarea: true,
                mousecoords: 'circle',
                gridcolor: '#333333',
                dotcolor: '#333333'
            });
            drawLine({
                holder: h3,
                data_holder: 'd2',
                mastercolor: '#d90000',
                spewidth: w,
                showarea: false,
                mousecoords: 'rect'
            });
            drawLine({
                holder: h4,
                data_holder: 'd2',
                mastercolor: '#ccc',
                spewidth: w,
                showarea: false,
                nodot: true // hide dots
            });
            drawLine({
                holder: h4,
                data_holder: 'd1',
                mastercolor: '#eb2682',
                spewidth: w,
                showarea: true,
                nodot: true // hide dots
            });
        });
        // Just used in the code highlighter
        hljs.tabReplace = '   ';
        hljs.initHighlightingOnLoad();
        }
        onLoad();
    </script>
    <script type="text/javascript">
        $('#myCarousel').carousel({
          interval: 2000
        });
    </script>
</body>

当我把代码包装在一个函数中时,我也应该添加,比如:

$(function(){});

它仍然不起作用。

这是原型库覆盖jQuery$引用的问题,即在代码中$引用的是protorype库而不是jQuery。

您需要使用jQuery.noConflict()来解决此问题,或者使用jQuery来引用jQuery库而不是$

jQuery(function($){
    $('#info-tabs').tab('show');
     $('#pop-info').tooltip('hide');
    $('#videoModal').modal('hide');
})