Jquery 更新数据库的异步调用

我有一个kendogrid，每行有一个可编辑的文本框。文本框在加载时自动填充来自db的数据

我想异步保存对文本框所做的任何更改。现在我甚至无法访问我的输入文本框

代码：

@model IEnumerable
@{
布局=空；
}
$（文档）.ready（函数（）{
$（'tbody>tr>td>div.col-xs-s>：text'）。在（'propertychange input'，函数（e）上{
log（'first'+$（this.val（））；
});
});
@使用（Html.BeginForm（new{id=“GridForm”}））
{
网格

@（Html.Kendo（）.Grid（））
.名称（“网格”）
.列（列=>
{
columns.Bound（e=>e.Facility）；
columns.Bound（e=>e.Number）
.ClientTemplate(
@" "
);
})
.Pageable（pager=>pager.Messages（Info=>Info.Empty（“未找到结果”））
.HtmlAttributes（新的{style=“overflow-y:hidden；”）
.DataSource（DataSource=>DataSource
.Ajax（）
.页面大小（6）
.Read（Read=>Read.Action（“数据”、“MyController”））
)
)
}

标记：

<tbody role="rowgroup">

<tr data-uid="27c8a881-1d6b-4e0b-b897-c6b04a185cd6" role="row">
<td role="gridcell">Facility  1</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="BGG" maxlength="3"></div>
</td></tr>

<tr class="k-alt" data-uid="5ed6cee8-9365-42db-b711-f2aaa2c69adf" role="row">
<td role="gridcell">Facility 2</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="ABC" maxlength="3"></div> 
</td></tr>

<tr data-uid="da8ba253-0fc0-4dc7-a110-7b4bda6b8a35" role="row">
<td role="gridcell">Facility 3</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="DEF" maxlength="3"></div>
</td></tr>

<tr class="k-alt" data-uid="36d2e72f-b3cb-4dd6-8fd3-f62f3a5a26e7" role="row">
<td role="gridcell">Facility 4</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="GHI" maxlength="3"></div> 
</td></tr>
</tbody>

设施1
设施2
设施3
设施4

[在上面的评论中反复讨论之后，一些“答案”——有价值的东西可能会出现…]

它将数据拉入网格并插入。如果它在加载数据之前启动jquery，我将如何修复它？我已经在视图的底部有了jquery

这似乎就是问题所在。问题中的jQuery代码在加载文档时执行，但在加载文档后，Kendo网格会很快发出AJAX请求，以实际获取数据并填充网格

所以我看到了两个可能的选择

也许Kendo的异步操作完成后，您可以调用一些事件或回调？我对该产品的了解还不够充分，无法演示，但我怀疑该产品已经足够成熟，可以拥有类似的产品

另一种方法是，您可以将

.on（）

与更高级别的DOM元素一起使用，以捕获动态创建的元素的事件。类似的方法可能会奏效：

$(document).on('propertychange input', 'tbody > tr > td > div.col-xs-2 > :text', function (e) {
    // ...
});

---

请注意，处理程序附加到

文档

本身，当文档加载时，它肯定存在。（从技术上讲，它可以附加到目标元素和顶层之间的层次结构中的任何不变元素上。）并且它只是根据选择器过滤事件。

您想知道如何在jQuery中使用AJAX吗？现在还不清楚你被困在哪里。我无法让我的jquery代码正常工作。它找不到文本框。但是，以后再深入了解如何进行异步调用会更好。小步骤。那么，这个jQuery的目标标记是什么？当选择器运行时，是否存在任何匹配的元素？它试图将kendogrid中每一行上重复出现的文本框作为目标。你想让em从chromedev工具复制/粘贴我的html标记吗？好吧，既然选择器针对的是一个非常特定的元素层次结构，那么最好至少看看html，看看这些元素是否存在。同样值得调试的是，看看这些元素在代码运行时是否存在，而不是在代码运行后动态创建。

$(document).on('propertychange input', 'tbody > tr > td > div.col-xs-2 > :text', function (e) {
    // ...
});