admin管理员组文章数量:1330565
When binding a click event to li
, that contains radio buttons, the radio button elements seems to lose the ability to being clicked. Visually, the radio buttons don't change, but the value is sent to the ViewModel observable property through the check
binding, when being clicked.
Any suggestions?
<li data-bind="click: setDimension, clickBubble: false",
css: { 'currentDimension' selectedDimension() === 'TimeD'}>
<input type="radio" data-bind="checked: dimesionPresentation" value="0" />
<input type="radio" data-bind="checked: dimesionPresentation" value="1" />
</li>
As you can see, I have tried clickBubble: false
, but doesn't help.
When binding a click event to li
, that contains radio buttons, the radio button elements seems to lose the ability to being clicked. Visually, the radio buttons don't change, but the value is sent to the ViewModel observable property through the check
binding, when being clicked.
Any suggestions?
<li data-bind="click: setDimension, clickBubble: false",
css: { 'currentDimension' selectedDimension() === 'TimeD'}>
<input type="radio" data-bind="checked: dimesionPresentation" value="0" />
<input type="radio" data-bind="checked: dimesionPresentation" value="1" />
</li>
As you can see, I have tried clickBubble: false
, but doesn't help.
- I'm unable to repro your issue: jsfiddle/GZtGG. Your code is working fine, the radio buttons are checked correctly. Can you maybe try to repro it in a jsfiddle? – nemesv Commented Jun 17, 2013 at 18:56
-
The
li
elements are inside anul
element, that is converted to a kendoPanelBar. Maybe that's the reason why??? – Javid Commented Jun 17, 2013 at 19:03 - 1 Specifying clickBubble for li element will not solve the problem because this stops click propagation from li to its parent. If you want to make sure your radio button is clicked, bind its click to empty funciton and specify clickBubble:true. That will enforce the click to happen at first on radio button and then on li element. Here is the jsFiddle: jsfiddle/MScuV/7 – Shalom Aleichem Commented Jun 18, 2013 at 0:30
2 Answers
Reset to default 7The key is to return true; at the end of the click handler function! This updates the UI correctly.
you have to set clickBubble to false and also return true inside the click function. See the solution here: http://jsfiddle/a4m4puts/2
<li data-bind="click: setDimension">
<input type="radio" data-bind="checked: dimensionPresentation, click: function(){ click; return true}, clickBubble: false" value="0" />
<input type="radio" data-bind="checked: dimensionPresentation, click: function(){ click; return true}, clickBubble: false" value="1" />
<input type="radio" data-bind="checked: dimensionPresentation, click: function(){ click; return true}, clickBubble: false" value="2" />
本文标签: javascriptKnockout click binding with radio buttons insideStack Overflow
版权声明:本文标题:javascript - Knockout click binding with radio buttons inside - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742233671a2437681.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论