1

我有以下代码（标记和 javascript），其中克隆了每块 2 个文本框。每个块包含2个文本框；一个带有普通文本框；另一个是与 datepicker 插件关联的文本框（“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

确保两件事：

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() 实际上检查类以确定是否没有为给定的 textbox 定义 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 回答