jQuery動態創建的日期選擇器不起作用

Question

我已經完成了我看到的大多數解決方案，但是對我的解決方案卻無效。

這是我的代碼：

function regenerateDatePickers()
{
  var length = $( ".forduplication" ).length;
  alert( length );
  for ( var i = 1 ; i <= length ; i++ ) {
    $( "#endDate" + i ).removeClass( "hasDatepicker" );
    $( "#endDate" + i ).datepicker();
  }
}

僅原始日期選擇器字段有效。 克隆的不是。 不過，奇怪的是，我動態創建的“選擇” *字段正在工作。

*選擇http://harvesthq.github.com/chosen/

編輯-添加了HTML代碼

<tr class="forduplication">
  <td>
    ...
    ...<!--lots of other HTML codes-->
    ...
  </td>
  <td><input id="endDate1" name="endDatefield1" size="10"></td>
  ...
</tr>

Answer 1

更新06/01/15

.live（）不再受支持。 使用.on（）可以解決。

$('body')
        .on('click', '.datePick', function() {
            $(this).datepicker();
        })
        .on('focus', '.datePick', function() {
            $(this).datepicker();
        });

---

您可以使用live和focusin

對於所有輸入字段都有一個類，在這種情況下，我使用datePick作為類

$('input.datePick').live('focusin', function() {
    $(this).datepicker();
});​

希望這可以幫助

Answer 2

一種方法是在每次點擊時銷毀並重新分配日期選擇器，但它存在性能問題

$('input[id^="endDate"]').live('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});

它可以工作，但是每次單擊輸入時都刪除並添加日期選擇器。 因此，如果您可以像克隆輸入一樣立即執行此操作，那是更好的選擇

....clone().datepicker('destroy').datepicker({showOn:'focus'}); 

然后將該元素添加到您想要的位置。