6

根据knockout点击绑定文档的“注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。这个偶数处理程序永远不会触发。我怎样才能使这项工作？

4

4 回答 4

8

您的点击处理程序永远不会触发的原因是因为它从未应用于您的元素。因此，当您在 jquery 中执行此操作时：

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

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

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

我不推荐这样做的原因是因为它是糟糕的淘汰赛做法，您应该按照click其他一些帖子的建议使用绑定。此外，您正在使用 id 属性，这对于模板化动态内容通常不是一个好主意 - 除非您绝对需要唯一静态元素的 id，否则只需使用类。

至于如何正确使用 Knockout 的点击绑定，一件棘手的事情是您需要了解 Knockout 如何进行范围界定。例如，如果您在循环内绑定单击，并且您想要主视图模型中的处理程序，则必须引用父范围，因为循环会更改您的上下文：

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

此外，如果您需要更改处理程序使用 (the this) 执行的 Javascript 上下文，则需要像这样绑定单击处理程序：

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

稍微玩一下这些东西，如果您仍然感到困惑，请提出一个新问题。祝你好运！

于 2014-09-12T04:29:52.537 回答
1

我认为问题与淘汰赛对您尝试绑定事件的 DOM 的修改有关。要解决此问题，请尝试将 click 函数分配给父<div>元素。分配单击处理程序时，使用带有选择器的重载来指定您希望仅在单击包含的按钮时处理单击。例如，像这样更改 div：

<div id="btnContainer" 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 () {       
    $('#btnContainer').on('click', '#btnParse', function () { alert('clicked');});
});

请注意，如果它<div>包含在另一个修改 DOM 的逻辑块中（模板、foreach 循环等），您可能需要将标签设置为不属于此类逻辑块#btnContainer的第一个祖先。<button>

于 2014-09-11T23:38:19.323 回答
0

在我的情况下，我正在使用一个 observableArray，它需要将一些 jQuery 魔法应用于该数组中的每个项目。我在自定义绑定方面遇到了一些问题，不想从该数组中的每个项目中获取两个变量。所以，在我的包装中，我将一些黑暗魔法作为一个函数添加到一个不可观察的项目中，这样当点击名称时，我正在处理的地图就会移动到那个位置。

HTML：

<ul data-bind="foreach: filteredItems">
    <li class="seat">
        <span class="name" data-bind="text:fullName, click: toggleEmp"></span>
    </li>
</ul>

代码：

function viewModel() {
    var vm = this;
    vm.empData = function(data) {
        var emp = this;
        emp.office_x_loc = ko.observable(data.xLoc);
        emp.office_y_loc = ko.observable(data.yLoc);
        emp.toggleEmp = function () {
            jQuery('#skyLineMap').lhpMegaImgViewer( 'setPosition', emp.office_x_loc(),emp.office_y_loc(), 0.8, false );
    };//*/
}//*/

我希望这有帮助

于 2013-02-28T19:48:14.187 回答
-1

您为点击绑定引用的注释是指您的视图模型中的方法，而不是您的自定义点击处理程序。

换句话说，如果您data-bind="click: doSomething"在<button>元素中有 a，doSomething()如果您希望它执行您的自定义处理程序，则视图模型中的方法应该返回 true。

于 2012-05-08T21:15:39.123 回答