当我在<tr>上有侦听器时，为什么我不能在复选框上有'

Why I can't have a click listener on a checkbox, when I have a listener on the <tr>

本文关键字：不能 为什么 复选框 侦听器 tr      更新时间：2023-09-26

我有一个新手问题，但是我不明白这是怎么回事。

我有这个表:

<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'，我不明白为什么侦听器不工作。我在以前的项目中使用过数百次，没有任何问题。我的猜测是视图模型中有些东西搞砸了，但是再次，有2个独立的函数和2个独立的侦听器。

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

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

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

reactivate: function () {
        console.log('checkbox');
        return true;
    }
<<p>看到strong>医生

注意:我不知道为什么，但我不能使它与change事件(如果有人可以在评论中解释)非工作小提琴

因为它是一个复选框，我猜你需要反应，如果它被选中或未选中?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进行操作，而只想对某些内容进行格式化，则可以使用computed

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

相关文章：