Wie hängt man jQuery UI Datepicker an dynamisch eingefügtes Formularfelder an?

Question

Ich habe eine Tabelle mit einer Reihe von Eingabefeldern, ähnlich einer Tabellenkalkulation. Einige der Eingabefelder verwenden den Datepicker von jQuery UI. Es gibt auch eine Schaltfläche zum Hinzufügen einer Tabellenzeile.

Wenn ich auf die Schaltfläche klicke, um eine Tabellenzeile hinzuzufügen, wird sie dem DOM korrekt hinzugefügt. Das Datepicker-Widget wird jedoch nicht an die Datumsfelder in dieser neuen Zeile angehängt.

Ich vermute, die Antwort ist es, live() - oder vielleicht on() - datepicker() zu verwenden, aber ich verstehe nicht, welche Syntax zu verwenden. Der Code unten sprengt bereits die Grenzen meines jQuery-Verständnisses. Mein Kopf tut weh. Hilfe?

<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> 

Anmerkung 2: Ich habe versucht, das so gut, sowohl mit Live() und(). Es scheint sowohl auf den ursprünglichen Feldern als auch den dynamisch eingefügten zu funktionieren, aber sporadisch (zumindest in Chrome). Wie, es wird drei Sekunden lang arbeiten und dann drei Sekunden lang stoppen, und dann arbeiten drei Sekunden und ...

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

Answer 1

einfach die picker rebind nach einer neuen Zeile hinzugefügt wird. Wenn das fehlschlägt, versuchen Sie die "Refresh" -Methode.

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