使用 knockout 时，jquery 单击事件不会触发

Question

根据knockout click binding documentation's "Note 3" ，Knockout 阻止点击事件执行默认功能。要覆盖此行为，我所要做的就是从处理函数返回 true。所以，我有这个标记:

<div data-bind="visible:Pages().length == 0">
    <div class="alert alert-info">Click "Parse" button.</div>
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button>
</div>

现在，我想将点击事件附加到按钮，如下所示:

$(function () {       
    $('#btnParse').on('click', function () { alert('clicked'); return true;});
});

请注意，我从该函数返回 true。这个偶数处理程序永远不会触发。我怎样才能做到这一点？

Answer 1

您的点击处理程序从未触发的原因是它从未应用于您的元素。所以当你在 jquery 中执行此操作时:

$('.some-class').on('some-event', someFunction);

然后，为了将处理程序绑定(bind)到该事件，首先 jQuery 必须找到您的 $('.some-class') 选择器。在您的情况下，当您绑定(bind)事件时，很可能 #btnParse 尚未通过 knockout 呈现到页面。或者，也可能的是，原始元素被渲染、销毁，然后另一个元素被渲染。在第二种情况下，事件处理程序不会保留在按钮上。一种替代方案(我不推荐)是在 DOM 中将处理程序绑定(bind)到更高的位置，例如在 document 级别，并将事件过滤为仅具有 id #btnParse 的事件:

$(document).on('click', '#btnParse', function () { console.log('hi'); });

我不建议这样做的原因是因为这是不好的 knockout 实践，您应该像其他一些帖子建议的那样使用 click 绑定(bind)。另外，您正在使用 id 属性，对于模板化动态内容来说，这通常不是一个好主意 - 只需使用类，除非您绝对需要唯一静态元素的 id。

至于如何正确使用 knockout 的点击绑定(bind)，一个棘手的事情是您需要了解 knockout 如何确定范围。例如，如果您在循环内绑定(bind)单击，并且希望来自主视图模型的处理程序，则必须引用父范围，因为循环会更改您的上下文:

<!-- ko foreach: someCollection -->
    <a data-bind="click: $parent.someFunction"></a>
<!-- /ko -->

此外，如果您需要更改处理程序执行时使用的 Javascript 上下文(this)，那么您需要像这样绑定(bind)点击处理程序:

<!-- ko foreach: someCollection -->
    <a data-bind="click: $parent.someFunction.bind($parent)"></a>
<!-- /ko -->

如果您仍然感到困惑，请尝试一下这些内容并提出一个新问题。祝你好运!