15

このdatepicker関数は、作成された最初の入力ボックスでのみ機能します。

それを含むのクローンを作成して、日付ピッカーを複製しようとしてdivいます。

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

jQuery UIのドキュメントによると、日付ピッカーを初期化するには、私がしなければならないことはありますが$('#example').datepicker();、それは機能しますが、作成された最初の日付ピッカーでのみ機能します。

複製するコードdivは次のとおりです。

$("a#dupMe").click(function(event){
  event.preventDefault();
  i++;
  var a = $("#template")
            .clone(true)
            .insertBefore("#template")
            .hide()
            .fadeIn(1000);
  a.find("input#txt").attr('value', i);
  a.find("input#example").datepicker();
});

最も奇妙なことは、document.ready私が持っていることです：

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

をクリックすると、#txt常に機能します。

4

4 に答える 4

12

代わりにCSSクラスを使用します。

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

次に、あなたのdocument.ready関数で：

$('.calendar').datepicker();

複数のカレンダーフィールドにそのように使用すると、うまくいきます。

于 2008-08-29T17:29:59.637 に答える
6

共通のクラス名も使用することをお勧めします。ただし、何らかの理由でこれに反対する場合は、テンプレート内のすべてのテキストボックスの日付ピッカーを作成する関数を作成することもできますdiv（各複製の後に呼び出されます）。何かのようなもの：

function makeDatePickers() {
  $("#template input[type=text]").datepicker();
}
于 2008-08-29T17:51:03.890 に答える
4

私は非常によく似た問題を抱えていましたが、何時間ものテストの後に解決策を見つけました。HTML コードのブロックをコピーして、jQuery 日付ピッカー カレンダーが既に含まれているセクションの後に挿入していました。最初に気づかなかったのは、jQuery UI カレンダーが.datepicker()関数の実行時に要素のクラスを変更することでした。その結果、コードをコピーしてその新しいセクションのカレンダーの新しいインスタンスを開始しようとすると、CSS によると既に 1 つあるため失敗します。これを使用しようとすると、.datepicker('destroy')実際には存在しないため、このゴースト インスタンスの破棄に失敗します。HTMLの日付ピッカー要素のクラスをリセットしてから、その要素に日付ピッカーを追加することで問題を解決しました...

以下は私が使用していたコードです。うまくいけば、これは他の誰かの時間を節約します...

$('#addaddress').click(function() {
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.address_template H1').eq(count).html("Previous Address " + count);
  $('.address_date').eq(count).attr("class","address_date");
  $('.address_date').eq(count).attr("id","movein" + count);
  $("#movein" + count).datepicker();
});
于 2009-09-14T18:22:16.910 に答える
0

私が複製しているhtmlには、複数の日付ピッカー入力があります。

Ryan Stemkoski の回答と Alex King のコメントを使用して、この解決策を思いつきました。

var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) {
    $(element).removeClass('hasDatepicker');
    $(element).datepicker();
});
clonedObject.appendTo('.jLo');

ありがとうございます。

于 2012-02-08T18:36:59.737 に答える