2016-09-20 6 views
0

私は動的にテキストボックスを生成し、各テキストボックスの日付ピッカーを個別に取得しようとしました。動的に作成されたテキストボックスに対してdatepickerを取得するのに苦労します

問題は、テキストボックスを選択して日付を選択すると、すべてのテキストボックスに適用されます。私は結果を得るために値を渡す方法を知らない。私の英語(または)私が表現した方法が間違っていれば、許してください。私はあなたの助けに感謝します。

私のスクリプトのカレンダーを呼び出す:

<script type="text/javascript"> 
$(window).load(function() { 

    $('#mycalendar3').monthly({ 
     mode: 'picker1', 
     target: '#mytarget1', 
     setWidth: '370px', 
     startHidden: true, 
     showTrigger: '#mytarget1', 
     stylePast: true, 
     disablePast: true, 
        xmlUrl: 'events.xml' 
    }); 


       $('#mycalendar2').monthly({ 
     mode: 'picker1', 
     target: '.value1', 
     setWidth: '370px', 
     startHidden: true, 
     showTrigger: '.value1', 
     stylePast: true, 
     disablePast: true, 
        xmlUrl: 'events.xml' 
    }); 



switch(window.location.protocol) { 
case 'http:': 
case 'https:': 
// running on a server, should be good. 
break; 
case 'file:': 
alert('Just a heads-up, events will not work when run locally.'); 
} 

}); 

HTMLコード:

<div style="display:inline-block; width:150px;"> 
        <input type="text" class="value1" id="mytarget" > 
     <div class="monthly" id="mycalendar2"></div> 
    </div> 


       <div style="display:inline-block; width:150px;"> 
     <input type="text" id="mytarget1"> 
     <div class="monthly" id="mycalendar3"></div> 
    </div> 
+0

上記のコードに問題はありません。この投稿には他のコードがありませんか?テキストボックスはどのように動的に生成されますか?あなたはそのコードを表示していただけますか? – vijayP

+0

[動的に作成された要素のイベントバインディングは可能ですか?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) –

+0

https://jsfiddle.net/ssoundar619/eav8hLwm/1/ –

答えて

0

あなたがイベントにjqueryのを使用する必要がある、私は、ここに

をデモフィドルを作成しました

$(function() { 
 
    $("#datepicker").datepicker(); 
 
    $("button").on('click', function() { 
 
    $('.output').append('<input type="text" name="gentext" id="gent" />'); 
 
    $("#gent").datepicker(); 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Normal input datepicker</h3> 
 
<p>Date: 
 
    <input type="text" id="datepicker"> 
 
</p> 
 
<button>generate</button> 
 
<h3>Generated input datepicker</h3> 
 
<div class="output"></div>

同じイベントをコードに適用してください。生成された入力にも適用されます。

関連する問題