KendoUI日期时间选择器-选择上一个/下一个月时调用单击功能 [英] KendoUI datetime picker - Calling an on click function when previous/next month is selected
问题描述
当用户单击Kendo UI日期时间选择器上的上一个/下一个月按钮时，我想触发一个单击事件.
I'd like to trigger an on click event when the user clicks the previous/next month buttons on the Kendo UI date time picker.
文档告诉我没有触发的事件发生这种情况时，我需要进行点击事件.
The documentation tells me there isn't an event that is triggered when this happens, so I need to make an on click event.
按钮没有ID，但具有唯一的类:k-nav-prev表示上个月的按钮，k-nav-next表示下个月的按钮.
The buttons don't have id's but do have unique classes: k-nav-prev for the previous month button and k-nav-next for the next month button.
但是，当我尝试为这些类的单击事件发出警报时，什么也没有发生. 有人会知道我在做什么错吗，或者单击这些按钮时是否有更好的方法来触发事件?
However, when I try to put an alert for the on click event for those classes nothing happens. Would anyone know what I am doing wrong, or if there is a better way to trigger an event when these buttons are clicked?
我附上了代码示例.感谢您的帮助.
I have attached a code sample. Thanks for any help.
$(document).ready(function() {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true
});
$(".k-nav-prev").click(function() {
alert("previous month button clicked");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/datetimepicker/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Remind me on</h4>
<input id="datetimepicker" title="datetimepicker" style="width: 100%;" />
</div>
<p id="test">
Hello world
</p>
</div>
</body>
</html>
推荐答案
问题是Kendo已经绑定到这些链接的点击并拦截了它们.您需要使用capture才能很好地捕获事件，然后再捕获.
The thing is that Kendo is already binding to clicks to those links and intercepting them. You need to use capture to well, capture the event before they do.
下面的代码可以做到这一点，但是有时它会捕获对a.k-nav-prev元素的点击，有时会捕获其中带有图标的span的点击:
The following code will do it, but sometimes it will capture the click on the a.k-nav-prev element, and sometimes on the span with the icon inside:
document.addEventListener('click', function(e) {
console.log(e);
if (!e.target.classList.contains("k-nav-prev") && !e.target.parentNode.classList.contains("k-nav-prev")) {
return;
}
console.log("Do your thing here");
}, true);
演示: https://dojo.telerik.com/@GaloisGirl/etEwOYEp
此处的capture的更多信息: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
这篇关于KendoUI日期时间选择器-选择上一个/下一个月时调用单击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
