document.ready 中的 Kendo 控件似乎还没有准备好

Question

我正在使用剑道

kendoNumericTextBox

。

kendo js 库包含在之前以下内容。

我正在尝试存储对实际输入的引用以供以后使用，如下所示：

$(document)
    .ready(function () {
        //Wire up the elemets with selectors
        $eventGrid = $("#jsGrid");
        $bedInput = $('#bed');
        $dateInput = $('#date');
        $operatingTimeInput = $("#operatingTime").data("kendoNumericTextBox"); <-- ERROR OCCURS HERE
        $plannedDowntimeInput = $("#plannedDowntime").data("kendoNumericTextBox");    

        fetchDayData(currentBed(), currentDate());
    })

Uncaught TypeError: Cannot read property 'value' of undefined

但是，当单步执行时，

$operatingTimeInput

和

$plannedDowntimeInput

都是未定义的。如果我稍后在控制台中手动执行这些分配，一切都会按预期进行。

现在，我好像记得有一个类似

document.ready()

但专门针对剑道的活动。虽然，我一生都找不到它......

有什么想法吗？

编辑1

这些字段正在像这样的剃刀视图中初始化：

    @(Html.Kendo().NumericTextBox()
        .Name("operatingTime")
        .Max(24)
        .Min(0)
        .Step(0.05)
        .HtmlAttributes(new { @id = "operatingTime" })
    )

所以如您所见，我无法控制文本框实际“创建”的时间。这就是为什么我正在寻找一种方法来创建实例通过 html 助手。

Answer 1

$(document)
.ready(function () {
   $("#operatingTime").ready(function(){
    setTimeOut(function(){
    if($("#operatingTime").data("kendoNumericTextBox")){
     //Wire up the elemets with selectors
    $eventGrid = $("#jsGrid");
    $bedInput = $('#bed');
    $dateInput = $('#date');
    $operatingTimeInput = $("#operatingTime").data("kendoNumericTextBox"); <-- ERROR WILL NOT OCCUR HERE
    $plannedDowntimeInput = $("#plannedDowntime").data("kendoNumericTextBox");    

    fetchDayData(currentBed(), currentDate());
      }
     },1000);
    });
    
})

因为我可以安心地等待 1 秒，所以我就遵循了这个逻辑。如果有其他方法适合您，请告诉我们。

Answer 2

jQuery 文档

，$(document).ready() 表达式中的代码在 DOM 准备好进行 JavaScript 操作后执行。 但是，当页面上存在多个 Telerik 组件或进行复杂操作时，仍然可能会出现计时问题。为了避免这种情况，最好利用

kendoReady

事件。

$(document).on("kendoReady", function () {
   if($("#operatingTime").data("kendoNumericTextBox")){
      //Wire up the elemets with selectors
      $eventGrid = $("#jsGrid");
      $bedInput = $('#bed');
      $dateInput = $('#date');
      $operatingTimeInput = $("#operatingTime").data("kendoNumericTextBox"); 
      $plannedDowntimeInput = $("#plannedDowntime").data("kendoNumericTextBox");    

      fetchDayData(currentBed(), currentDate());
 }

});