如何将jQuery UI datepicker附加到动态插入的formfield? [英] How to attach jQuery UI datepicker to dynamically inserted formfield?

问题描述

我有一个包含一堆输入字段的表，有点像电子表格.一些输入字段使用jQuery UI datepicker.还有一个用于添加表格行的按钮.

I have a table containing a bunch of input fields, sort of like a spreadsheet. Some of the input fields use the jQuery UI datepicker. There is also a button to add a table row.

当我单击按钮添加表行时，它已正确添加到DOM.但是，datepicker小部件不会附加到该新行的日期字段中.

When I click the button to add a table row, it is added to the DOM correctly. But, the datepicker widget doesn't get attached to the date fields in that new row.

我怀疑答案是使用live()或on()来调用datepicker()，但我不明白该使用哪种语法.下面的代码已经在限制我对jQuery的理解.我头疼.帮助吗?

I suspect the answer is to use live() - or maybe on() - to call datepicker(), but I don't understand what syntax to use. The code below is already pushing the limits of my jQuery understanding. My head hurts. Help?

<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中)有效.例如，它将工作三秒钟，然后停止三秒钟，然后工作三秒钟，然后...

Note 2: I've tried this as well, with both live() and on(). It seems to work on both the original fields and the dynamically inserted ones, but sporadically (at least in Chrome). Like, it'll work for three seconds and then stop for three seconds, and then work for three seconds and...

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

推荐答案

添加新行后，只需重新绑定日期选择器即可.如果失败，请尝试刷新"方法.

Just rebind the datepicker after adding a new row. If that fails, try the "refresh" method.

$('.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"); 
    });

这篇关于如何将jQuery UI datepicker附加到动态插入的formfield?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！