当我在上有一个监听器时，为什么我不能在复选框上有一个点击监听器[英]Why I can't have a click listener on a checkbox, when I have a listener on the 本文翻译自 Slim 查看原文 2014-07-08 111 knockout.js/

I have a really newbie question here, but I can't understand what is going on.

我这里有一个非常新手的问题,但我无法理解发生了什么。

I have this table:

我有这张桌子:

<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>

Now as you see I have placed a listener on the tr and it works just perfectly, But when I click on the checkbox I'm getting the loadT function executed and this is the fnction listening to the tr click. Why the reactivate function is not running? It is supposed to get executed once I have clicked on the checkbox.

现在你看到我已经在tr上放置了一个监听器并且它工作得非常完美,但是当我点击复选框时我正在执行loadT功能,这是听取tr点击的功能。为什么重新激活功能没有运行?我点击复选框后应该执行它。

I know that I'm missing something extremely small here, but I really can't spot my mistake at this momment.

我知道我在这里错过了一些非常小的东西,但我真的无法在这个故事中发现我的错误。

P.S Here are the 2 functions:

P.S以下是2个功能:

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

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

When I click on the checkbox it prints just: 'test1', I can't understand why the listener is not working. I have used it hundreds of times in previous projects, without any issues. My guess is that something is messed up in teh view model, but again, there are 2 seperate functions and 2 seperate listeners.

当我单击复选框时,它只打印:'test1',我无法理解为什么监听器不工作。我在以前的项目中使用了数百次,没有任何问题。我的猜测是某些东西在视图模型中搞砸了,但同样,有两个单独的函数和两个单独的监听器。

2 个解决方案

#1

Your example works with the click event if you add clickBubble: false to your markup to prevent the event from bubbling:

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

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

Working fiddle

Note that you will need to return true; to allow the default action (the box actually getting checked).

请注意,您需要返回true;允许默认操作(实际检查框)。

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

See doc

Note: I am not sure why, but I can't make it work with the change event (if someone can explain in the comments) Non working fiddle

注意:我不知道为什么,但我无法使用更改事件(如果有人可以在评论中解释)非工作小提琴

#2

Since its a checkbox I guess you need to react on if its checked or unchecked? The KO way of doing that would be

由于它是一个复选框,我猜你需要做出反应,如果它已选中或未选中? 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/

If you do not want to act on checkstate but rather just format something you can use a computed

如果你不想在checkstate上行动,而只是格式化你可以使用计算机

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

#1