jqueryuiのdatepickerをcloneした時の注意点

今更ですが、jqueryのcloneメソッドは、ブロック単位で一括コピーするのに便利ですが、 イベント処理が有る場合は、注意が必要です。

(jQuery)要素にイベントを設定する際、"clone(true)"に備える。 – すたら日記

にあるように、使用する要素は、 単純に$(‘.class1’)や$(‘#id1’)等で要素を取得操作していると、clone元の要素を取得してしまい、 正しい挙動になりません。
その為、$(this).parent等を使って、thisからたどっていく形で、要素を取得する必要があります。

datepickerも上記が原因かは、ソースを見てないのでわかりませんが、 cloneすると、正常に稼働しなくなります。

調べてみると、

clone.removeClass("hasDatepicker")    // classを削除
    .removeData("datepicker")     // 関連づけられたデータを削除
    .removeAttr("id")             // idも削除
    .unbind()                     // 関連づけられた関数を削除
    .datepicker();                // datepickerを再設定

引用:【jqueryui】datepickerしたinputのclone at softelメモ

上記の方法で正常にcloneできるようですが、 classとidは .removeClass(“hasDatepicker”) .removeAttr(“id”) 削除しなくても正常稼働するようです。

ただ、id自体が重複してしまうので重複しないIDを設定しなおすか元々IDを設定しないのが正しいかもしれませんが、 ブロック単位でcloneした場合は findメソッドで設定するのが楽かと思います。

clone.find('.datepicker').removeData("datepicker")
                        .unbind()
                        .datepicker({
                            format: 'yyyy/mm/dd',
                            language : 'ja'
                        });

のりべーす

インスタグラム

Instagram ビール用
Instagram 日本酒用



個人情報保護方針お問い合わせ