Question

我遇到了一些我想尝试运行的jQuery的问题。我试图将其实现到我的bootstrap应用程序中：

但是，当我尝试将其实现到我的引导应用程序中时，我会收到一系列错误，例如：

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(){});

它仍然不起作用。

Answer 1

原型库覆盖$的{{1}}引用是个问题，即在代码jQuery中引用protorype库而不是jQuery。

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

jQuery冲突，可能的bootstrap问题？

1 个答案: