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只有當我第一次點擊另一個輸入字段時纔會觸發

回答

相關問題