如何将jQuery UI日期选择器附加到动态插入的表单字段？

Question

我有一个包含一堆输入字段的表，类似于电子表格。其中一些输入字段使用jQuery UI日期选择器。还有一个按钮用于添加表行。

当我点击添加表行的按钮时，它被正确地添加到DOM中。但是，新行中的日期选择器小部件没有附加到日期字段上。

我猜想答案是使用live()或者on()调用datepicker()，但我不知道要使用什么语法。下面的代码已经超出了我的jQuery理解范围。我头疼。帮帮我？

<script type="text/javascript">
    $(function() {
        $( ".usedatepicker" ).datepicker();
    });

    $('.rowadd').live('click',function(){
        var appendTxt = '<tr><td><input class="usedatepicker" name="something" type="text" /></td></tr>';
        $("tr:last").after(appendTxt);
    });

</script>

注意2：我也尝试过使用live()和on()，看起来在原始字段和动态插入的字段上都可以工作，但是会出现间歇性的问题（至少在Chrome中）。比如，它会持续工作三秒钟，然后停止三秒钟，接着再工作三秒钟...

$(function() {
    $('.usedatepicker').live('click', function(){
        $(this).datepicker({showOn:'focus'});
    });
});

- Derrick Miller

Answer 1

在添加新行后，只需重新绑定日期选择器即可。如果失败了，请尝试使用“refresh”方法。

$('.rowadd').live('click',function(){
        var appendTxt = '<tr><td><input class="usedatepicker" name="something" type="text" /></td></tr>';
        $("tr:last").after(appendTxt);
        $(".usedatepicker").datepicker(); // or 
        $(".usedatepicker").datepicker("refresh"); 
    });

- Marko