ページロード後に挿入された要素のjQuery - datepickerがアクティブにならない

Question

日付と時刻を入力するための3つの異なるレイアウトで埋められるdivがあります。

これは、レイアウトのいずれかによってロードされるhtmlです：私は、この

$('.date-input').live 'click', (e) -> 
    $(this).datepicker({showOn:'focus'}).focus() 
$('.time-input').live 'click', (e) -> 
    $(this).timepicker({showOn:'focus'}).focus() 

これは正常に動作しますが、私は、リンクを持っているようなリスナーを管理するために、ライブを使用し

<div class="row clearfix input-field"> 
    <div class="span10 date-selection"> 
    <div class="input-prepend date-time"> 
    <input class="date-input" name="date" size="16" type="text" value=""> 
    </div> 
    <div class="input-prepend date-time"> 
    <input class="time-input" name="time" size="16" type="text" value=""> 
    </div> 
    </div> 
</div> 

新しい日付と時刻フィールドのセットを作成します。私は上記の名前とIDがちょうどテストのためにあるように、レールに保存するために有効な、より良い名前を生成します最終的なコードで

$(".add-lesson").live 'click', (e) -> 
    e.preventDefault() 
    lesson = $('.multiple-lessons .row:first').clone() 
    $(".multiple-lessons .row:last").after(lesson) 
    $(".multiple-lessons .row:last input.date-input").attr('name', 'date2') 
    $(".multiple-lessons .row:last input.date-input").attr('id', 'new-date-id') 
    $(".multiple-lessons .row:last input.time-input").attr('name', 'time2') 
    $(".multiple-lessons .row:last input.time-input").attr('id', 'new-time-id') 

。

ピッカーは、元の生の要素ではなく、クローン化されたもので作業課題

。 私がピッカーを使用せず、クローンを使用して新しいローのロードを追加すると、クローンされたすべてのローがピッカーで機能します。

は、私は、最新のjQueryとjQuery UI

任意のアイデアを使用していますか？

Answer 1

@pawarからの解決策を得ることができませんでしたので、より良い解決策が見つかるまでこのハッキングを使用しています。以下

$('.date-input').datepicker('destroy') 
$('.date-input').datepicker() 

Answer 2

ようになりクローンのオーバーロードされたバージョンがあります -

.clone([withDataAndEvents] [, deepWithDataAndEvents]) 

あなたは

$('.date-input').bind 'click', (e) -> 
    $(this).datepicker({showOn:'focus'}).focus() 
$('.time-input').bind 'click', (e) -> 
    $(this).timepicker({showOn:'focus'}).focus() 

、など.bind()で正常にイベントをバインドしてから

、として .clone(true, true)を使用することができます

lesson = $('.multiple-lessons .row:first').clone(true, true) 

これは問題を解決すると思います。

Answer 3

完全ワーキング溶液である：

$(function(){ 
    var counter = 0; 
     $(".add-lesson").live('click', function (e) { 
      e.preventDefault() 
      lesson = $('.multiple-lessons .row:first').clone(false, false); 

      $("input.date-input",lesson).attr('name', 'date2'+counter); 
      $("input.date-input",lesson).attr('id', 'new-date-id'+counter); 
      $("input.time-input",lesson).attr('name', 'time2'+counter); 
      $("input.time-input",lesson).attr('id', 'new-time-id'+counter); 
      $(".multiple-lessons .row:last").after(lesson); 
      $('.multiple-lessons .row:last #new-date-id'+counter) 
       .datepicker({showOn:'focus'}); 
      $('.multiple-lessons .row:last #new-time-id'+counter) 
       .timepicker({showOn:'focus'}); 
      counter++; 
     }); 

     $('.date-input').click(function(){ 
      $(this).datepicker({showOn:'focus'}); 
     }); 
     $('.time-input').click(function(){ 
      $(this).timepicker({showOn:'focus'}); 
     }); 

    }); 

<div class="multiple-lessons"> 
<div class="row clearfix input-field"> 
    <div class="span10 date-selection"> 
    <div class="input-prepend date-time"> 
     <input class="date-input" size="16" type="text" value=""></input> 
    </div> 
    <div class="input-prepend date-time"> 
     <input class="time-input" size="16" type="text" value=""></input> 
    </div> 
    </div> 
</div> 
</div> 

Answer 4

日付ピッカーが入力に装着されると、特別なクラスの "hasDatepicker" が入力に加算されますこの入力にはすでに日付ピッカーが添付されていることをプラグインに伝えます。 クローンされた入力からクラスを削除すると、datepickerは呼び出されたときに正しくバインドされます。以下のような

何か：私が住んでいると思った

lesson = $('.multiple-lessons .row:first').clone().removeClass('hasDatepicker');