jQuery动态创建了datepicker无法正常工作

时间:2012-05-15 04:13:21

标签: javascript jquery datepicker

我已经完成了我看到的大多数解决方案,但它对我来说无效。

这是我的代码:

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

只有原始的datepicker字段正在运行。克隆的不是。 奇怪的是,我动态创建的“选择”*字段正在运行。

*选择http://harvesthq.github.com/chosen/

EDIT   - 添加了HTML代码

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

2 个答案:

答案 0 :(得分:4)

2015年6月1日更新

.live()不再受支持。使用.on()可以解决这个问题。

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

您可以使用livefocusin

为所有输入字段创建一个类,在这种情况下,我使用datePick作为类

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

希望这有帮助

答案 1 :(得分:0)

这样做的一种方法是在每次点击时销毁和重新分配日期选择器,但它有性能问题

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

它可以工作,但每次单击输入时删除并添加datepicker。所以如果你能在克隆输入之后立即做到这一点,那就更好了,比如

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

然后将该元素添加到您想要的位置。