Привязка события к динамически добавленному датчику не работает - PullRequest
Новая
       37

Привязка события к динамически добавленному датчику не работает

0 голосов
/ 17 октября 2018

Я использую кендо datepicker здесь, у меня есть оригинальный div с двумя datepicker'ами и дублированный div с двумя datepicker'ами, когда я дублирую 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>

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Вы не должны 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

0 голосов
/ 17 октября 2018

Сразу же я вижу, что вы присваиваете два разных элемента div одной и той же переменной, объявленной дважды.

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

Начните с объявления этого отдельно: 

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