jQuery Datepicker只有当我第一次点击另一个输入字段时才会触发

我在使用datepicker时有一些奇怪的行为。当我加载页面，并直接点击日期选择器输入时，没有任何反应。当我再次点击时，没有任何反应。但是当我点击另一个输入字段，然后再次尝试datepicker字段时，它会显示出来。jQuery Datepicker只有当我第一次点击另一个输入字段时才会触发

在将datepicker触发器放入活动函数后，问题出现了，因为我输入的是动态生成的。

这是我的代码：

$(".date").on('click', function() { 
    $(this).datepicker({ 
     dateFormat: "dd.mm.yy", 
     altField: $(this).closest("td").find(".dateFormated"), 
     altFormat: "yy-mm-dd" 
    }) 
})

编辑：我已经看到了live()已废弃1.7。因此，我为on()转换了live()。虽然没有解决问题。

整个HTML

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html" /> 
    <meta name="author" content="gencyolcu" /> 

    <title>Untitled 1</title> 
    <link rel="stylesheet" href="http://localhost:8082/ivy/page/designer/ZWM$1/css/cupertino/jquery-ui-1.9.2.custom.css" /> 
    <script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/js/jquery-ui-1.9.2.custom.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      counter = 0; 

      $("#addRow").click(function() { 
       counter++; 

       rowHtml = '\ 
       <tr class="datarow" id="row' + counter + '">\ 
        <td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>\ 
        <td><input type="text" class="from" /></td>\ 
        <td><input type="text" class="to" /></td>\ 
        <td>\ 
         <select class="type">\ 
          <option value="1">Typ 1</option>\ 
          <option value="2">Typ 2</option>\ 
         </select>\ 
        </td>\ 
        <td class="removeRow" id=' + counter + '>X</td>\ 
       </tr>'; 

       $('#submitButton').before(rowHtml); 
      }) 

      $(".removeRow").live("click", function() { 
       id = $(this).attr("id"); 
       $("#row" + id).remove(); 
      }) 

      $("[name=formZeitdaten]").submit(function(i) { 
       values = ""; 
       $(".datarow").each(function(j) { 
        tr = $(this); 
        date = tr.find('td').find('.date').val(); 
        from = tr.find('td').find('.from').val(); 
        to = tr.find('td').find('.to').val(); 
        type = tr.find('td').find('.type').val(); 
        values = values + date + ',' + from + ',' + to + ',' + type + ';'; 
       }) 
       console.log(values); 
       $("[name=dataset]").val(values); 
      }) 

      $("#slider").slider({ 
       range: true, 
       min: 0, 
       max: 1440, 
       step: 15, 
       values: [30, 210], 
       slide: function(event, ui) { 
        $(".date").val(ui.values[0] + ":" + ui.values[1]); 
       } 
      }); 

      $(".date").on('click', function() { 
       $(this).datepicker({ 
        dateFormat: "dd.mm.yy", 
        altField: $(this).closest("td").find(".dateFormated"), 
        altFormat: "yy-mm-dd" 
       }) 
      }) 
     }); 
    </script> 
</head> 

<body> 
<span id="test"></span> 
<form name="formZeitdaten" method="post"> 
    <table id="zeitdaten"> 
     <tr> 
      <td>Datum</td> 
      <td>Von</td> 
      <td>Bis</td> 
      <td>Typ</td> 
      <td id="addRow"><input type="button" value="Hinzufügen" /></td> 
     </tr> 

     <tr class="datarow"> 
      <td><input type="text" class="date" /><input type="text" class="dateFormated" /></td> 
      <td><input type="text" class="from" /></td> 
      <td><input type="text" class="to" /></td> 
      <td> 
       <select class="type"> 
        <option value="1">Typ 1</option> 
        <option value="2">Typ 2</option> 
       </select> 
      </td> 
      <td></td> 
     </tr> 

     <tr id="submitButton"> 
      <td><input type="submit" /></td> 
     </tr> 
    </table> 
</form> 
<div id="slider"></div> 
</body> 
</html>

来源

2012-12-12 Ahatius

你可以发布你的html吗？ –

@AlessandroMinoccheri对不起，花了这么长时间，但我现在已经添加了HTML。 – Ahatius

在你addRow功能，添加：

$("#row"+counter+" .date").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: 0, 
    showButtonPanel: true, 
    showAnim: 'show' 
});

你的元素添加到DOM后。之后您可以摆脱$(".date").on('click',...)声明。

来源

2012-12-12 08:43:26 Barmar

这也不起作用：\ – Ahatius

你可以做一个小提琴吗？ – Barmar

http://jsfiddle.net/pRFj4/1/ – Ahatius

-1

这应该为你工作

$('.date').datepicker({ 
      dateFormat: 'dd-mm-yy', 
      minDate: 0, 
      showButtonPanel: true, 
      showAnim: 'show' 
     });

来源

2012-12-12 07:52:55 newtonajuna

查看@JonH的评论 – Ahatius

不，在这种情况下它不起作用，因为这里的元素是动态添加的。它可以在需要多个日期选择器实例的页面中工作。简单地说，你在一个页面中有多个日期选择器。这种情况是不同的。 –

jQuery Datepicker只有当我第一次点击另一个输入字段时才会触发

回答

相关问题