淘汰赛事件处理

时间:2012-12-03 13:03:52

标签: javascript knockout.js

我有一个代码(您可以在http://learn.knockoutjs.com/#/?tutorial=intro播放,在播放前单击“在输出窗口中运行”):

HTML:     

<div class="btn" style="margin-left: 15px;" data-bind="click: includeMyNumber">
   <input data-bind="checked: isIncludeMyNumber" data-val="true" id="IncludeMe" name="IncludeMe" style="margin: 0" type="checkbox" value="true" />&nbsp;
   Include my number (+<span>11111111111</span>) 
</div>

使用Javascript:

 // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {

    this.isIncludeMyNumber = ko.observable(false);

    this.includeMyNumber = function(){
       this.isIncludeMyNumber(!this.isIncludeMyNumber());
    }
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

问题是复选框点击事件处理无法正常工作。当我单击[div class =“btn”...] ... [/ div]区域内的空格时,复选框行为正常,但是当我单击复选框本身时,它不会被选中。在任何情况下如何使其可检查?

谢谢。

1 个答案:

答案 0 :(得分:1)

您的用例是在单击文本时选中复选框吗?

我在自定义绑定集合

中对此进行了绑定

https://github.com/AndersMalmgren/Knockout.Bindings

http://jsfiddle.net/5nqw4/

<input data-bind="checked: checked, label: { caption: 'Label with reference to input' }" type="checkbox" />

编辑:您也可以使用标准元素http://jsfiddle.net/7dTfM/

中的复选框来修复此问题。