javascript - 当我在 上有一个监听器时，为什么我不能在复选框上有一个点击监听器

Question

我在这里有一个非常新手的问题，但我不明白发生了什么。

我有这张表:

<table class="activeTrackersTable" id="allTrackersTable" data-page-navigation=".pagination">
    <thead>
        <tr>
            <th>ID</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th class="reactivateTH">Reactivate</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: ObjArray">
        <tr data-bind="click: loadT">
            <td><span data-bind="text: id"></span>
            </td>
            <td><span data-bind="text: tName"></span>
            </td>
            <td><span data-bind="text: pName"></span>
            </td>
            <td><span data-bind="text: creator"></span>
            </td>
            <td class="reactivateTD">
                <input type="checkbox" name="reactivate" data-bind="event:{change: reactivate}">
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                <div class="pagination"></div>
            </td>
        </tr>
    </tfoot>
</table>

现在如您所见，我在 tr 上放置了一个监听器，它工作得非常完美，但是当我单击 checkbox 时，我得到了 loadT 函数已执行，这是监听 tr 点击的函数。为什么 reactivate 函数没有运行？一旦我点击了复选框，它就应该被执行。

我知道我在这里遗漏了一些非常小的东西，但此时此刻我真的无法发现我的错误。

P.S 这里有两个函数:

loadT = function() {
      console.log('test1');
};

reactivate = function(){
    console.log('inside');
};

当我点击复选框时，它只打印:'test1'，我不明白为什么监听器不工作。我在以前的项目中已经使用了数百次，没有任何问题。我的猜测是 View 模型中有些东西搞砸了，但是同样，有 2 个独立的函数和 2 个独立的监听器。

Answer 1

如果您将 clickBubble: false 添加到您的标记中以防止事件冒泡，您的示例将使用 click 事件:

<input type="checkbox" name="reactivate" 
       data-bind="event:{click: reactivate}, clickBubble: false" />

Working fiddle

请注意，您需要return true; 以允许默认操作(实际选中的框)。

reactivate: function () {
        console.log('checkbox');
        return true;
    }

参见 doc

注意:我不确定为什么，但我无法让它与 change 事件一起工作(如果有人可以在评论中解释)Non working fiddle