jQuery onClick 在 KnockoutJS 绑定(bind)的 div 中工作

Question

快速提问，哪个更有趣。

我有一个 div，它使用 Knockout JS 在 AJAX 请求后绑定(bind)一堆数据。

<div data-bind="with: user" id="ActionWindow">
...Stuff...
</div>

一切正常。

但是如果我想使用 jQuery onCLick 或 onChange 事件，我不能这样做:

<div data-bind="with: user" id="ActionWindow">
<a class="NewGroupLink">Add New Group</a>
...Stuff...
</div>
<script>
$('.NewGroupLink').click(function () {
    alert('bob');
});
</script>

事件没有触发。

我可以在“a”中放置一个 onClick=""，我希望这会起作用，但为什么这不起作用？

顺便说一下，如果链接位于 div 之外，上面的代码可以正常工作。

谁能告诉我为什么？是否有办法让 jQuery 代码工作？

非常感谢。

Answer 1

您的 HTML 代码是否位于 knockout 中的条件 if 或 ifnot 范围内？由于它们的工作方式(除非计算结果为 true，否则它们实际上不会插入包含的 DOM 节点)，当您尝试 Hook 事件时，超链接实际上可能不在文档中。

如果是这种情况，我的建议是使用以下代码来 Hook 您的事件处理程序:

$('body').on('click', '.NewGroupLink', function() {
    ... 
});

这样，事件实际上附加到文档的主体，但处理程序的代码仅在事件发生在具有 CSS 类 NewGroupLink 的元素上时执行。

如果您的页面很大，如果您使用更接近实际链接但仍然是祖先的不同元素(而不是 body)，代码可能会更精确/性能更好。