为什么我的 KendoUI Widget 以未定义的形式返回？答案

【问题标题】：Why is my KendoUI Widget being returned as undefined?为什么我的 KendoUI Widget 以未定义的形式返回？
【发布时间】：2017-10-09 14:22:47
【问题描述】：

我正在编写一些 jquery 来处理我的 KendoUI Widgets for MVC 提供的值。我一直在关注他们自己的文档，但我遇到了以undefined 返回的小部件的问题。我首先查看的是他们的故障排除，他们要求您确认所有脚本的顺序正确，并且没有对 jQuery 的重复引用。我已经这样做了，但仍然遇到问题。

小部件以undefined 返回的问题似乎仅限于剑道日期/时间选择器。

这是使用 Razor 视图在 HTML 中定义的小部件。

@(Html.Kendo().DateTimePicker()
  .Name("estDept")
  .Value(DateTime.Now))

我有一个在页面加载和按下特定按钮时运行的函数。获取值的代码如下：

function voyageTime() {
    var estDeparture = $("#estDept").data("kendoDateTimePicker");
    console.log(estDeparture.value());
};

当您第一次加载页面时，此代码可以正常工作，但如果您刷新，您会收到一条错误消息，指出 estDeparture is undefined。我尝试将代码添加到文档就绪函数$(function(){ ... });，它确实有效，但它不是我希望它存在的地方。因此，为了测试，我将文档中的小部件定义为一个全局变量，如下所示：

$(function(){ 
    //I missed out var to define a global scope
    estDeparture = $("#estDept").data("kendoDateTimePicker");
    console.log(estDeparture.value());
});

当我从我的函数访问上述全局变量时，我得到了同样的未定义错误，就像它无法将它传递给静态函数一样。

我在这里做错了什么，为什么定义的小部件总是返回为未定义的？

【问题讨论】：

标签： jquery razor kendo-ui datetimepicker

【解决方案1】：

我对 Telerik 的 Kendo 库并不特别熟悉，但听起来您的元素可能不会在刷新时重新注册到 DOM。我在更新部分视图之前遇到过这个问题（我认为它类似于剑道元素）。问题是，当局部视图最初呈现时，所有 DOM 元素都被注册，因此它们存在于相应的事件中。然而，在局部视图刷新之后，局部视图中的所有元素都是“新的”并且不再注册到 DOM 事件中。我克服这个问题的方法是使用“文档”对象（而不是特定的 dom 对象）编写我的 jquery 函数。

局部视图：

<div id="reloadedWidget">   
    <input id="reloadedElement" type="text" />
</div>

例如：
我写了这样的东西（在部分刷新后工作）：

<script>
$(document).on('change', '#reloadedElement', function(){ 
    var estDeparture = $(this).data("kendoDateTimePicker");
    console.log(estDeparture.value());
}); 
</script>

而不是写（部分刷新后中断）：

<script>
$('#reloadedElement').onChange(function() 
{ 
    var estDeparture = $(this).data("kendoDateTimePicker");
    console.log(estDeparture.value());
}); 
</script>

Click here for example code

【讨论】：