Question

我使用Unsemantic进行分配，需要有一个日期选择器来设置约会。到目前为止，我已经经历了相当多的故障排除，并试图找到我的代码中的问题，这些问题阻止我在我的网站中使用datepicker时，当我设置一个具有相同jQuery代码的虚拟页面时工作正常。所以现在我有我的页面设置，但我有两个日期选择器 - 一个在主网格容器内，一个在外面。我在网格容器div之外设置的日期选择器工作正常，但当我有一个内部时，它只是不起作用，是一个简单的文本框。我的代码如下（我已经排除了一些元素以使其更清晰）：

    <!DOCTYPE html>
     <html lang="en">
     <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
    $(function() {
    $( "#datepicker" ).datepicker();
    });
    </script>
    </head>
    <body>
    <p>Date: <input type="text" id="datepicker"></p>
      <div class="grid-container">
      <p>Date: <input type="text" id="datepicker"></p>
    </div>
<!--<script src="./assets/javascripts/jquery.js"></script>-->
<script src="./assets/javascripts/demo.js"></script>
</body>
</html>

jquery.js被注释掉的原因是因为某些原因，即使datepicker在grid-container之外，它也会阻止datepicker工作。这一切都是非语义的，所以我使用的是Unsemantic的js和css文件而没有对它们的网格容器代码进行任何改动，而且我可以看到css文件中没有任何东西可以在网格容器内部使jQuery无效。如果有人能告诉我为什么/如何使用datepicker在网格容器内工作，或者是否需要解决jquery.js的额外问题，请告诉我。

Answer 1

您正在使用id＆＃34; datepicker＆＃34;两次在同一页面。我将第二个更改为＆＃34; datepicker2＆＃34;并在jQuery函数中添加了另一个条目，它可以工作。

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

然后......

<div class="grid-container">
  <p>Date: <input type="text" id="datepicker2"></p>
</div>

jQuery UI Datepicker在Unsemantic Responsive Grid-Container中不起作用

1 个答案: