1

2 つのテキスト ボックスの各ブロックが複製される次のコード (マークアップと JavaScript) があります。各ブロックには 2 つのテキスト ボックスが含まれます。1 つは通常のテキスト ボックス。もう 1 つは、関連する日付ピッカー プラグインを含むテキスト ボックス (「textboxDueDate」の ID) です。ユーザーがポップアップカレンダー内をクリックすると、最初の/オリジナルのみがポップアップカレンダーで機能します。ただし、複製された「textboxDueDate」テキスト ボックスには、内部をクリックしたときにポップアップ カレンダーが表示されません。コードの何が問題になっていますか?

    <div>
        <input type="button" id="buttonAddBookTrack" value="Add Another Book Track" />
</div>

        <div id="divTemplate">
        <fieldset>
            <legend>Book</legend>
            <div>
                <label>Book ISBN: </label>
                <input type="text" />
            </div>
             <div>
                <label>Due Date: </label>
                <input type="text" id="textboxDueDate" />
            </div>
        </fieldset>
</div>

        <div id="divOtherBooks"></div>


<!-- java script ---->
<script type="text/javascript">
    var _idCount = 1;

    $(document).ready(function () {
        $('input[id^=textboxDueDate]').datepicker(); 

        $('#buttonAddBookTrack').click(function () {
            var appendedDiv = $('<div>').appendTo('#divOtherBooks').data('divClonedTemplate', '_' + _idCount);
            $('#divTemplate').children().clone().appendTo(appendedDiv);

            $('input[id^=textboxDueDate]').not('.hasDatePicker').datepicker();  

            _idCount++;
        });
    });
</script>
4

2 に答える 2

1

2つのことを確認してください：

a）テキストフィールドのクローンを作成した後、「hasDatePicker」クラスを削除します

b）テキストフィールドに一意のIDを追加します

作業コードを確認してください

var _idCount = 1;

    $(document).ready(function () {
        $('input[id^=textboxDueDate]').datepicker();

        $('#buttonAddBookTrack').click(function () {
            var appendedDiv = $('<div>')
                .appendTo('#divOtherBooks')
                .data('divClonedTemplate', '_' + _idCount);

            var nodeO=$('#divTemplate').children().clone()
                $(nodeO).find('input[id^=textboxDueDate]')
                 .attr('id','textboxDueDate_'+_idCount)
                 .removeClass('hasDatepicker')
                 .datepicker()

            $(nodeO).appendTo(appendedDiv)


            _idCount++;
        });
    });

あなたとコードをトリミングします、私は明確にするためにコードの余分な行を追加しました

編集：なぜremoveClass('hasDatepicker')ですか？

datepicker（）は実際にクラスをチェックして、指定されたテキストボックスにdatepickerオブジェクトが定義されていないかどうかを判断します。あなたの場合、クローンを作成するとgarbage、datepicker（）が開始されないようにするクラスを取得します

于 2012-04-08T20:28:11.440 に答える
0

ディープを使用するclone：

$('#divTemplate').children().clone(true, true).appendTo(appendedDiv);

イベントを元の要素にバインドしたままにするという問題があります。

したがって、代わりにクローン作成後にイベントをバインドします。

$(document).ready(function () {
  $('#buttonAddBookTrack').click(function () {
    var $appendedDiv = $("#divTemplate")
      .clone()
      // Remove divTemplate's id
      .removeAttr("id")
      .appendTo('#divOtherBooks')
      .data('divClonedTemplate', '_' + _idCount);
    $("#textboxDueDate", $appendedDiv)
      // Remove datepicker plugin data
      .removeData("datepicker")
      // Remove element's parent id
      // Note: DatePicker will automatically generate an id
      .removeAttr("id")
      .datepicker();
    _idCount++;
  });
});

divTemplate要素がどこでも使用されないことが保証されている場合は、複製された要素からDatePickerデータを削除する手順を保存できます。

于 2012-04-08T20:01:11.053 に答える