5

スプレッドシートのような、たくさんの入力フィールドを含むテーブルがあります。一部の入力フィールドは、jQueryUIの日付ピッカーを使用します。テーブル行を追加するためのボタンもあります。

ボタンをクリックしてテーブル行を追加すると、DOMに正しく追加されます。ただし、datepickerウィジェットはその新しい行の日付フィールドにアタッチされません。

答えは、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では）機能します。たとえば、3秒間動作し、次に3秒間停止し、次に3秒間動作して...

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

1 に答える 1

6

新しい行を追加した後、日付ピッカーを再バインドするだけです。それが失敗した場合は、「更新」方法を試してください。

$('.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"); 
    });
于 2012-04-10T21:07:10.110 に答える