Question

真正感兴趣的快速问题。

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

<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代码是否在淘汰赛的if条件ifnot范围内？由于它们的工作方式（它们实际上并不插入包含的DOM节点，除非它们评估为true），当您尝试挂钩事件时，超链接实际上可能不在文档中。

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

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

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

如果您的网页很大，如果您使用更接近实际链接但仍然是祖先的其他元素（而不是body），则代码可以更精确/更好地执行。

Answer 2

如果您正在从正在从ajax调用中检索的数据创建目标元素，那么您需要使用委托来定位单击处理程序（单击处理程序仅适用于当时DOM中存在的元素处理程序最初运行。

$("#ActionWindow").on( "click", ".NewGroupLink", function() {
    alert( $( this ).text() );
});

Answer 3

首先，在淘汰赛中使用jquery事件是一种不好的做法。 KO有自己的事件，所以如果你想将click handler和handler函数添加到你的视图模型并添加点击绑定到html元素：

<a class="NewGroupLink" data-bind="click: onClickHandler">Add New Group</a>

您的代码不起作用，因为在呈现div的内容之前执行查询代码。所以当它被称为链接时不存在。这是因为with绑定，它等到ko.applyBindings被调用，如果用户不为null，则呈现div。

Answer 4

尝试使用on（see jQuery docs）

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

jQuery onClick on在由KnockoutJS绑定的div中工作

4 个答案: