如何在KendoUI网格中通过a标签调用jQuery函数实现AJAX内容加载

你当前的代码存在一个关键问题：模板里的<a>标签使用了固定的id="toggleShowIncident"，但网格每一行渲染时都会生成这个标签，最终页面会出现多个相同ID的元素——这既违反HTML规范，也会导致你的$("#toggleShowIncident").click()只能绑定第一个元素的事件，后续行的点击操作完全无效。下面给你两种实用的解决方案：

方法一：使用事件委托（推荐） #

事件委托是处理动态生成元素事件的最佳实践，你可以给网格的父容器绑定事件，通过选择器匹配目标元素，不管后续生成多少行都能正常触发逻辑：

步骤1：修改模板，替换重复ID为Class #

把模板里的id="toggleShowIncident"改成class="toggle-show-incident"，避免ID冲突：

<script id="description-template" type="text/x-kendo-template">
  <a class="toggle-show-incident" data-code="#: id #">#: generaldescritpion #</a>
</script>

步骤2：绑定事件委托 #

在你的JavaScript代码中，给网格容器（比如假设网格容器ID是#grid）绑定click事件：

// 用网格容器作为委托对象，也可以用document兜底
$("#grid").on("click", ".toggle-show-incident", function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为（不需要可移除）
  var dataCode = $(this).data('code');
  var splitter = splitterElement.data("kendoSplitter");
  // 继续编写你的业务逻辑...
});

方法二：直接在模板中绑定onclick事件 #

如果你的业务逻辑比较简单，也可以直接在模板的<a>标签里添加onclick属性，直接调用函数并传入所需参数：

修改后的模板 #

<script id="description-template" type="text/x-kendo-template">
  <a onclick="toggleShowIncident(#: id #)" href="javascript:void(0);">#: generaldescritpion #</a>
</script>

对应的函数定义 #

把原来的函数改成接受参数的形式：

function toggleShowIncident(dataCode) {
  var splitter = splitterElement.data("kendoSplitter");
  // 这里使用传入的dataCode执行业务逻辑...
}

这里用href="javascript:void(0);"是为了阻止a标签的默认跳转行为，避免页面不必要的滚动或刷新。

两种方法各有侧重：事件委托更适合复杂场景，能统一管理事件；直接绑定onclick更直观，适合简单逻辑，你可以根据实际需求选择~

内容的提问来源于stack exchange，提问作者user7678643