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 以下是2个功能：

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

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

当我点击复选框时，它只打印：＆＃39; test1＆＃39;，我无法理解听众无法正常工作的原因。我在以前的项目中使用了数百次，没有任何问题。我的猜测是视觉模型中有些东西搞砸了，但同样，有2个单独的函数和2个单独的监听器。

Answer 1

如果您在标记中添加click以防止事件冒泡，那么您的示例适用于clickBubble: false事件：

<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

Answer 2

由于它是一个复选框，我猜你需要做出反应，如果它已选中或未选中？ KO的做法是

ViewModel = function() {
   this.checked = ko.observable(false);
   this.checked.subscribe(this.onChecked, this);
};

ViewModel.prototype =  {
   onChecked: function(value) {
      console.log(value);
   }
};

<input data-bind="checked: checked" type="checkbox" />

http://jsfiddle.net/EG5HU/

如果您不想在checkstate上执行操作，而只是格式化某些内容，则可以使用计算

http://jsfiddle.net/EG5HU/1/

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

2 个答案: