動態添加的日期選擇器上的事件綁定不起作用
[英]Event binding on dynamically added datepicker not working
問題描述
我在這里使用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>
2 個解決方案
解決方案1
0 2018-10-17 16:49:54
您不應該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 。
解決方案2
-1 2018-10-17 16:33:04
馬上，我可以看到您正在將兩個不同的div分配給兩次聲明的相同變量。
var datepicker = $(".from").data("kendoDatePicker"); var datepicker = $(".to").data("kendoDatePicker");
首先單獨聲明：
var datepicker_from = $(".from").data("kendoDatePicker");
var datepicker_to = $(".to").data("kendoDatePicker");
Google Analytics（分析）事件不起作用-動態添加文件下載點擊事件
[英]Google Analytics Event Not Working - file download click event added dynamically
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.