Boostrap 3 Tooltip和IScroll Javascript在Head标记中冲突

Boostrap 3 Tooltip and IScroll Javascript conflicting in Head tag

本文关键字：Head 冲突 Javascript Tooltip IScroll Boostrap      更新时间：2023-09-26

似乎无法解决此代码的问题。如果我删除IScroll，ToolTip就会起作用，反之亦然。任何线索都会有所帮助。下面是本页的标题部分。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="">
<meta name="author" content="mydomain.com">
<title>My Title</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/plugins/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/app.css">
<!-- Exam Plugin -->
<link type="text/css" rel="stylesheet" href="lib/css/styles.css" media="screen"/>
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
<!-- IScroll -->
<script type="text/javascript" src="iscroll.js"></script>
<!-- Functions -->
<script type="text/javascript">
    // Tooltip function
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({ 'placement': 'top' });
    });
    //IScroll
    var myScroll;
    function loaded () {
        myScroll = new IScroll('#wrapper', {
            scrollbars: false,
            hscroll: false,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
        setTimeout(function () {
            myScroll.refresh();
        }, 0);
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>

Benn正在阅读关于JQuery noconflict（）的文章，但不确定这是否适用于上述内容。为了挑出我有问题的代码，这里没有其他的头部分。

<!-- Functions -->
<script type="text/javascript">
    // Tooltip function
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({ 'placement': 'top' });
    });
    //IScroll
    var myScroll;
    function loaded () {
        myScroll = new IScroll('#wrapper', {
            scrollbars: false,
            hscroll: false,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
        setTimeout(function () {
            myScroll.refresh();
        }, 0);
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>

您应该将iScroll代码包装在一个立即调用的函数表达式中，以防止全局名称空间冲突，例如：

(function ($) {
    $(function () {
        var myScroll = new IScroll('#wrapper', {
            scrollbars: false,
            hscroll: false,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
        setTimeout(function () {
            myScroll.refresh();
        }, 0);
    });
})(jQuery);

我也添加了文档就绪，并取消了函数包装器，因为我看不到您在任何地方调用它。

相关文章：