jQueryを使用して入力ボックスを追加したjQuery UIピッカー

Question

ページ上の行にフォームを印刷しています。行には、フォーム要素を保持するいくつかの列が含まれています。テーブルと似ていますが、CSSに似ています。

ユーザーがID add_transaction_rowのリンクをクリックすると、もう1つの行/ divをページに追加するjQueryが少し呼び出されます。この行には、上の行と同じdivおよびフォーム要素のセットが含まれています。

私は要素date[]、sub_cat_id[]などの名前を付けて、次のページで処理する更新の配列を取得しました。

日付入力ボックスにjQuery datepickerを使用しています。私は.datepickerと呼ばれるクラスでトリガーを持っています。

最初の行でjQueryの日付ピッカーが期待通りに表示されます。しかし、下の行の日付入力ボックスのいずれかをクリックすると（新しい行/入力ボックスがjQueryによって追加されます）、datepickerは機能しません。

私はそれがまったく同じ名前であると考えていたので、それらにすべて一意のIDを付けました。まだ運がありません。

私は今、ページロード時に.datepickerを追加してjQueryと関係があると考えています。そして、新しい行を追加するために下部をクリックすると、これはソースにhtmlを追加しますが、jQueryのdatepickerがロードされた後新しい日付/入力ボックスを選択しますか？

誰もがこれに光を当てることができたら、私はそれを感謝します。

<?php 

    $my_new_split = ''; 
    $my_new_split .= '<div class="split_transaction_box">'; 
    $my_new_split .= '<div class="span-7">' . form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"') . '</div>'; 
    $my_new_split .= '<div class="span-7">' . form_dropdown('sub_cat_id[]', $subcategories_options) . '</div>'; 
    $my_new_split .= '<div class="span-5">' . form_input('reference[]') . '</div>'; 
    $my_new_split .= '<div class="span-4 last">' . form_input('ammount[]') . '</div>'; 
    $my_new_split .= '<div class="clearfix"></div></div><!-- /.split_transaction_box -->'; 

    $my_new_split = trim($my_new_split); 

    $replace_this = array("\r\n", "\n", "\r"); 
    $my_new_split = str_replace($replace_this, '', $my_new_split); 

    $my_new_split = str_replace('"', '\"', $my_new_split); 

?> 

<script> 

    $(document).ready(function() { 

     $('#add_transaction_row').click(function() { 
      $(".split_continer").append("<?=$my_new_split;?>"); 
      return false; 
     }); 
    }); 

</script> 

<hr /> 

<div class="span-24 last"> 

    <?=form_open('accounts/do_split')?> 

    <div class="split_continer"> 

     <div class="split_transaction_box"> 

       <div class="span-7"><?=form_input('date[]', '', 'id="' . random_string('numeric', 8) . '" class="datepicker"');?></div> 
       <div class="span-7"><?=form_dropdown('sub_cat_id[]', $subcategories_options);?></div> 
       <div class="span-5"><?=form_input('reference[]');?></div> 
       <div class="span-4 last"><?=form_input('ammount[]');?></div> 


      <div class="clearfix"></div> 
     </div><!-- /.split_transaction_box --> 

    </div><!-- /.split_container --> 

    <br /> 
    <a href="#" class="button" id="add_transaction_row">Add new split</a> 
    <input type="submit" class="button white" value="Save this split" /> 

    <?=form_close()?> 

Answer 1

あなたの正確右jQueryの日付ピッカーを添付した後、あなたがページにそれらの要素を追加しているので、日付ピッカーは、新しい要素では動作しません。私は自分自身でこの問題に出会った。私はそれをやるためのいくつかの方法を思いついた。

最初の方法は、ライブクリックハンドラを要素にバインドし、datepickerが適用されているかどうかを確認し、適用しない場合は適用します。

http://jsfiddle.net/uyx67/1/

しかし、おそらくより良い方法は、どちらの方法が働く、と仕事をそのように

http://jsfiddle.net/4jmkw/3/

をオブジェクトとしてjqueryのを使用して要素を構築し、日付ピッカーを適用することです。

Answer 2

<script> 

    $(document).ready(function() { 

     $('#add_transaction_row').click(function() { 
      var new_row = jQuery("<?=$my_new_split;?>"); 
      $(".split_continer").append(new_row); 

      $(".datepicker").datepicker({ 
       numberOfMonths: 2, 
       dateFormat: 'DD, d MM, yy' 
      });   

      return false; 
     }); 

    }); 

</script>