0

jqueryを使用して新しいフォーム要素を動的に追加しています。何らかの理由で、.datepicker()追加した新しい要素では への呼び出しは機能しませんが、動的に追加されなかった古い要素では機能しました。.attr('style', 'color: red;') の代わりに置くと.datepicker()、機能します。ドキュメント準備完了関数内の元の呼び出しが機能することに注意してください。

これは、追加ボタンがクリックされたときに呼び出されるコードです。

function addMulti(name) {
    it = $('[name=' + name + ']');
    base = it.data('baseName');
    on = it.data('number') + 1;
    name = base + "-" + on;
    copy = it.clone()
    copy.prop("name", name).attr("data-is-default", false).removeAttr('data-number').
        fadeIn('slow').appendTo(it.parent());
    it.data('number', on); 
    if(it.hasClass('date-pickable')) { // <-- This returns true, I checked.
        copy.datepicker();
    // Where if I add clone.attr('style', 'color: red;') it turns it red.
}
}

これは、その時点で作成されたすべてのフィールドを日付ピッカーにする呼び出しです。

<script type="text/javascript">
$(document).ready(function() {
  $("input.date-pickable").datepicker()
});
</script>

firebug または google chrome の「要素の検査」に表示されるエラーはありません。しかし、何か奇妙なことが起こっています。document.ready 関数と同じ呼び出しを firebug consul に入力しても、新しく追加された要素はまだ日付ピッカーになりません。しかし、出力にカーソルを合わせると、対象とする要素が選択されます。

$("input.date-pickable").datepicker() // What I typed in

Object[input#dp1371953134342.field-input 06/22/2013, input#dp1371953134343.field-input, input#dp1371953134342.field-input 06/22/2013, input#dp1371953134342.field-input 06/22/2013] // What it put out. The last three numbers are the IDs JQuery assigned to the added elements. I checked.
4

2 に答える 2

2

jQuery UI の datepicker はhasDatepicker、複数の datepicker を同じ要素にアタッチすることを避けるために、datepicker を持つすべての要素に常にクラスを追加します。
すでに日付ピッカーを持つ要素を複製すると、そのクラスも取得されます。jQuery UI は要素に既に日付ピッカーがあると見なすため、新しい日付ピッカーを複製にアタッチすることはできません。

クローンからクラスを削除します。

var copy = it.clone(false);

copy.removeClass('hasDatepicker').prop("name", name)
    .attr("data-is-default", "false").removeAttr('data-number')
    .fadeIn('slow').appendTo(it.parent());

すべての変数をグローバルにしないようにしてください。

于 2013-06-23T02:32:31.977 に答える
0

これは機能しますか？

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('focus',"input.date-pickable", function(){
        $(this).datepicker();
    });
});
</script>

JSfiddle のデモ

于 2013-06-23T02:23:24.237 に答える