Ajax html 表格追加无法识别 jQuery

Question

我试图在选择表格行时输出一条消息，HTML 表格主体正在我的控制器中构建，然后通过 Ajax 将其附加到视图中的表格。数据正在按预期构建，但是当我单击表格行时，没有任何反应。

尽管我在<tr> 中设置了clickable 类，但当它被附加到视图时，似乎有些东西在翻译中丢失了。在 chrome 中，我可以做一个检查元素，并且可以看到该表具有 clickable 类。作为健全性测试，我在视图中硬编码了一个虚拟表，该表调用了相同的 jQuery 函数。像魅力一样工作。

为什么我在Controller中构造表体时消息没有被执行？

控制器

var t = "";  

foreach (var item in associateResults.monthly_hierarchy)
{
    t += @"<tr class=""clickable"">";
    t += "<td>" + item.AgentName + "</td>";
    t += "<td>" + item.AgentSSOn + "</td>";
    t += "<td>" + item.Site + "</td>";
    t += "<td>" + item.BusGroup + "</td>";
    t += "<td>" + item.MgrName + "</td>";
    t += "</tr>";
}

return Content(t);

jQuery

jQuery(document).ready(function($) {
  $(".clickable").click(function() {
     alert("hello")
  });
});

Answer 1

您的问题表明该表已加载 ajax。这意味着页面加载时元素将不存在。因此，您在准备好的文档中的绑定将找不到任何要绑定的元素。您需要在创建字段后执行绑定，或者更优选地，创建一个不关心何时创建字段的委托绑定。

jQuery(document).ready(function($) {
    $(selectorForTable).on("click", ".clickable", function() {
        alert("hello")
    });
});

这样做是在表格上放置一个单击事件处理程序，该处理程序在页面加载时确实存在。它侦听来自它拥有或将拥有的任何子元素的点击事件，如果它们匹配 childSelector（在本例中为“.clickable”），它将执行逻辑。