Question

我有以下代码（标记和javascript），其中克隆了每个2个文本框的块。每个块包含2个文本框;一个普通文本框;另一个是文本框（＆＃34; textboxDueDate＆＃34;的id），与datepicker插件关联。当用户在其中单击时，只有第一个/原始文件与弹出日历一起使用。然而，克隆＆＃34; textboxDueDate＆＃34;文本框在单击内部时没有显示弹出日历。我的代码出了什么问题？

    <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>

Answer 1

确定两件事：

a）克隆文本字段后删除'hasDatePicker'类

b）在文本字段中添加唯一ID

检查working code

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（）

Answer 2

使用深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数据的步骤。

克隆时，jquery-plugin datepicker不起作用

2 个答案: