0

動的日付ピッカーを表示する必要があります。私のコードは以下のとおりです

$(function() {
$('.datepicker').datepicker({
    showAnim: "clip",
    gotoCurrent: true,
    dateFormat: "dd-mm-yy"
});
$('#mdcn_name').click(function(){

            $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>').fadeIn('slow').appendTo('#dataTabl');


});


});

<table id="dataTabl">
        <tr>
            <th>Exp Date</th>

            </tr>
</table>

行の追加をクリックすると、datepicker を動的に作成/表示する必要があります。私を助けてください

4

4 に答える 4

2

これは、動的に追加された div に対して日付ピッカーが初期化されていないためです。

日付ピッカー関数を作成する

function displayDatepicker(){
 $('.datepicker').datepicker({
   showAnim: "clip",
   gotoCurrent: true,
   dateFormat: "dd-mm-yy"
 });
}

$(function() {
     displayDatepicker()  //initialize date picker whn doucment is ready

     $('#mdcn_name').click(function(){

        $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>').fadeIn('slow').appendTo('#dataTabl');

         displayDatepicker() //call it after the element is appended...now this finds the appended div with a class datepicker and initailze the datepicker...

      });
});
于 2012-12-27T06:27:57.543 に答える
1

提供されているすべてのソリューションはすべての日付ピッカーを再初期化しますが、実際には新しいものだけをターゲットにしたいと考えています。以下は、新しい日付ピッカーフィールドのみをターゲットにします

/* store datepicker options in object*/
var datePickerOpts = {
    showAnim: "clip",
    gotoCurrent: true,
    dateFormat: "dd-mm-yy"
}
$(function() {
    $('.datepicker').datepicker(datePickerOpts);
    $('#mdcn_name').click(function() {

        var $row = $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>')
        $('#dataTabl').append($row);
        /* look for datepicker in new row and initialize*/
        $row.fadeIn('slow').find('.datepicker').datepicker(datePickerOpts);

    });
});
于 2012-12-27T06:50:37.227 に答える
0

おそらく、datepicker の初期化が 1 回だけ行われ、クリック イベントが発生し、input class="datepicker" が DOM に存在する前に発生する可能性がありますか?

匿名関数を追加直後の .click() 関数に移動します。

$('#mdcn_name').click(function(){
    $('<tr class="field" id="row"><td><input type="text" id="expire_date" name="expire_date" class="datepicker" placeholder="dd-mm-yyyy"/></td></tr>').fadeIn('slow').appendTo('#dataTabl');
    $(".datapicker").datepicker({
    ....
    ...
    ...
    etc....

});

于 2012-12-27T06:31:04.130 に答える
-1

関数を

$(document).ready(function(){})

これにより、dom Ready イベントが処理されます

詳細な説明については、このリンクを参照してください

http://davidwalsh.name/javascript-domready

お役に立てれば

于 2012-12-27T06:28:24.227 に答える