Question

据我所知，jQuery是冲突的。我怎么能解决jQuery的问题，因为“bootstrap.min.js”需要“jquery.min.js”。这是我的代码：

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="doctor.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

问题是因为您正在加载两个不同版本的jQuery，1.10.2和3.2.0。由于它们被添加到页面的顺序，第二个实例没有jQueryUI方法。

虽然可以在页面中包含多个版本的jQuery，但应尽可能避免使用它，因为它不是一个可维护的解决方案。要解决此问题，您应该更改代码以使用单个jQuery实例，如下所示：

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="doctor.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

Answer 2

您可以在加载jQuery脚本标记后调用var jquery_version = jQuery.noConflict()，稍后使用jquery_version使用它。 jQuery documentation

Answer 3

使用noConflict选项。检查附加的代码段

＆＃13;

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


<script>
    var jqOld = jQuery.noConflict();
    jqOld(function() {
        jqOld("#datepicker" ).datepicker();
    })
</script>

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="doctor.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input id = "datepicker"/>

＆＃13;

Answer 4

你附加了两个jquery文件＆amp; 2个jquery ui文件，删除一个

未捕获的TypeError：$（...）。datepicker不是HTMLDocument的函数。<anonymous>

4 个答案: