Question

我在这里使用kendo datepicker，我有一个带有两个datepicker的原始div，以及一个带有两个datepickers的重复的div，当我复制div时，datepicker事件仅在第一个重复的div上触发一次，然后停止工作，我尝试了事件绑定，但没有成功，有人可以帮忙吗？

$(document).ready(function() {
  $(".from, .to").kendoDatePicker();

  $('.calendar').click(function() {
    $(this).siblings('.k-datepicker').find('input').data("kendoDatePicker").open();
  });

  $('.from, .to').each(function(index, el) {
    $(el).bind("focus", function() {
      $(this).data("kendoDatePicker").open();
    });
  });

  $('.duplicate-btn').on('click', function(e) {
    e.preventDefault();
    var duplicateable = $(this).next('.duplicate');

    var html = $('<div>').append(duplicateable.clone()).html();
    $(html).insertBefore(duplicateable);
    var new_el = duplicateable.next('.duplicate');
    new_el.fadeIn(600).removeClass('duplicate');
  });
});

.k-dropdown-wrap .k-select,
.k-numeric-wrap .k-select,
.k-picker-wrap .k-select {
  display: none !important;
}

div {
  margin-bottom: 15px;
}

.duplicate {
  display: none;
}

<link href="http://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css" rel="stylesheet">

<div>
  <label>From</label>
  <input class="from">
  <button class="calendar">Calendar</button>
</div>

<div>
  <label>To</label>
  <input class="to">
  <button class="calendar">Calendar</button>
</div>

<button class="duplicate-btn">Duplicate</button>

<div class="duplicate">
  <div>
    <label>From</label>
    <input class="from">
    <button class="calendar">Calendar</button>
  </div>

  <div>
    <label>To</label>
    <input class="to">
    <button class="calendar">Calendar</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>

Answer 1

您不应clone()这些元素。它们具有小部件的许多属性。相反，我建议您使用模板来创建新元素，然后对它们进行初始化：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      $(document).on('focus', '[data-role="datepicker"]', function(index, el) {
          $(this).data("kendoDatePicker").open();
      });
      
      $('input[type="date"]').kendoDatePicker();
      
      $('button').on('click', function() {
        let newDatesTemplate = kendo.template($("#dates-template").html()),
            newDates = newDatesTemplate({}),
            $newDatesDOM = $(newDates);
        
        $newDatesDOM
          .appendTo('#container')
          .find('input')
          	.kendoDatePicker();
      });
    });
  </script>
  <script id="dates-template">
    <div>
      <input type="date" class="from">
      <input type="date" class="to">
    </div>
  </script>
</head>
<body>
  <div>
    <input type="date" class="from">
    <input type="date" class="to">
  </div>
  
  <div id="container"></div>
  <button>Add more dates</button>
</body>
</html>

说明：

模板：

<script id="dates-template">
  <div>
    <input type="date" class="from">
    <input type="date" class="to">
  </div>
</script>

模板的简单示例。

添加更多元素：

let newDatesTemplate = kendo.template($("#dates-template").html()), // Creates the template with the `script#dates-template` content
    newDates = newDatesTemplate({}), // Runs the template
    $newDatesDOM = $(newDates); // Creates a jQuery object with the result

$newDatesDOM
  .appendTo('#container') // Appends the new DOM elements to a target element
  .find('input')
    .kendoDatePicker(); // Inits the widgets

现在这将完成您想要的魔术：

$(document).on('focus', '[data-role="datepicker"]', function(index, el) {
    $(this).data("kendoDatePicker").open();
});

该事件委托将在原始元素和动态添加的元素中执行一个事件，因为它绑定到document。

Demo

Answer 2

立即开始，我可以看到您正在将两个不同的div分配给两次声明的相同变量。

var datepicker = $(".from").data("kendoDatePicker"); var datepicker = $(".to").data("kendoDatePicker");

首先单独声明：

var datepicker_from = $(".from").data("kendoDatePicker");
var datepicker_to = $(".to").data("kendoDatePicker");

动态添加的日期选择器上的事件绑定不起作用

2 个答案: