Question

我有一个完美的JQuery下拉列表，直到我尝试在同一页面上添加Jquery datepicker。日期选择器有效，但删除了下拉列表。我不确定是什么导致了冲突，我试图让它们都起作用。

---- ----头

<head>
  <link rel="stylesheet" type="text/css"  href="fancystyle1/styles.css" >
  <link rel="stylesheet" type="text/css"  href="css/style.css"  >

  <script src="fancystyle1/js/vendor/jquery-1.9.0.min.js"></script>
  <script src="fancystyle1/js/vendor/modernizr.js"></script>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>-->
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

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

<script src="fancystyle1/js/jquery.simple.select.js"></script>
            <script type="text/javascript">
                $(function() {
                    $('select').selectBoxes();  
                });             
            </script>

</head>

Answer 1

你在这里包含了两次jQuery库：

<script src="fancystyle1/js/vendor/jquery-1.9.0.min.js"></script>

在这里：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

这是冲突的原因。只需从代码中删除第二个字符串。

Answer 2

如果可以，请避免在您的网站上使用2个版本的jQuery。对于较旧的浏览器兼容性，jQuery版本1.11.1是您最好的选择。否则只需坚持使用最高版本（1.9.0）并转储另一个版本（1.6.2）

您的示例中缺少元素（例如，选择），但您现在需要这样的内容：

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" type="text/css"  href="fancystyle1/styles.css" >
  <link rel="stylesheet" type="text/css"  href="css/style.css"  >      
  <script src="fancystyle1/js/vendor/jquery-1.9.0.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="fancystyle1/js/vendor/modernizr.js"></script>
  <script src="fancystyle1/js/jquery.simple.select.js"></script>
</head>

<body>
  <input id="datepicker" style="width: 100px;"/>
  <script type="text/javascript">
    $(function() {
       $('select').selectBoxes();  
       $("#datepicker").datepicker();
    });             
    </script>
</body>

备注：

将您的脚本包含在head元素中（至少目前是这样，您可以轻松找到它们）。效率/缓存/捆绑更改将在稍后进行。

在jQuery UI之前和使用jQuery的任何其他脚本之前包含jQuery。

如果可以，只包含1个版本的jQuery 。支持多个同步版本是一场噩梦。

查询1.11.1是旧浏览器支持的当前最佳/最新版本。

特定于页面的jQuery包装在DOM ready事件处理程序中，因此可以在页面中的任何位置进行。在body结尾处是一个常见的位置，但在head中也很好。

Jquery彼此冲突

2 个答案: