【jqueryui】datepickerしたinputのclone

Tweet

Category JavaScript / Tagged jQuery 2013/08/28

問題

jqueryuiのdatepickerで日付入力できるようにした要素をcloneして複製をどこかに追加したとき、日付入力できなくなってて困っているのですが。

答え

ここまでやること。

//複製して
var clone = $('あるinput').clone();
//どこかに追加して
$('どこか').append(clone);
//日付入力可能にする
clone.removeClass("hasDatepicker")    // classを削除
    .removeData("datepicker")     // 関連づけられたデータを削除
    .removeAttr("id")             // idも削除
    .unbind()                     // 関連づけられた関数を削除
    .datepicker();                // datepickerを再設定

もともとidのあった要素を複製したらidが重複するし、もともとidのなかった要素をdatepicker()すると、jqueryuiが重複しないidを付与しているので、どちらにしろidはいったん削除するか、改めて付与する。

Demo

ボタンをクリックすると、日付入力欄を含む行を複製する。

<table id="demo20130828">
<thead><tr><th>日付</th><th>メモ</th><th>複製</th></tr></thead>
  <tbody>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
  </tbody>
</table>

<script>
$(function(){
    $('#demo20130828 .datepicker').datepicker();
    $('#demo20130828').on('click', '[type="button"]', function(){
        var tr = this.parentNode.parentNode;
        var clone = $(tr).clone();
        $(tr).after(clone);
        $('.datepicker', clone).removeClass("hasDatepicker")
            .removeData("datepicker")
            .removeAttr("id")
            .datepicker();
    });
});
</script>