javascript 淘汰赛js单选按钮点击事件重置选择

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21250137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:28:08  来源:igfitidea点击:

knockout js radio button click event reset selection

javascriptknockout.js

提问by JenonD

I have bind "checked" and "click" event on a radio button list. But whenever a radio button is clicked, the selection does not stay. I must be doing something really wrong. Really appreciate if you guys can point me to the right direction.

我在单选按钮列表上绑定了“选中”和“点击”事件。但是无论何时单击单选按钮,选择都不会保留。我一定是做错了什么。如果你们能指出我正确的方向,真的很感激。

Please see the Fiddle Here

请看这里小提琴

View model:

查看型号:

var viewModel = {
    wantsSpam: ko.observable(true),
    spamFlavor: ko.observable('cherry'),

    click: function(model){
        console.log(model);
    }
};

View:

看法:

<input type="radio" name="flavorGroup" value="cherry" 
       data-bind="checked: spamFlavor, click:click" />

回答by nemesv

From the clickevent documentation:

click事件文档:

By default, Knockout will prevent the clickevent from taking any default action.
...
However, if you do want to let the default clickaction proceed, just return truefrom your click handler function.

默认情况下,淘汰赛将阻止click事件采取任何默认操作。
...
但是,如果您确实想让默认click操作继续进行,只需return true从您的点击处理程序函数中进行。

So your radio button is reset because of your clickhandler and to fix it you just need to return trueat the end:

所以你的单选按钮因为你的click处理程序而被重置,要修复它,你只需要return true在最后:

click: function(){
   alert('Hi');
   return true;
}

Demo JSFiddle.

演示JSFiddle

回答by Nicholas Hazel

Basically, your click handler won't end up catching that you want to retain the value.

基本上,您的点击处理程序最终不会捕捉到您想要保留的值。

What is happening is that it is going back to default after you select an item.

发生的事情是在您选择一个项目后它会恢复为默认值。

Simply try:

只需尝试:

return true;

return true;

As the only code in your handler.

作为您的handler.

Fiddle away: http://jsfiddle.net/SinisterSystems/jhHkD/4/

摆弄:http: //jsfiddle.net/SinisterSystems/jhHkD/4/

回答by Lingasamy Sakthivel

You just remove the click event or use return truefrom click event. Because Knockout prevent the click event from taking any default action. This means that if you use the click binding on an a tag (a link), for example, the browser will only call your handler function and will not navigate to the link's href

您只需删除点击事件或return true从点击事件中使用。因为 Knockout 会阻止 click 事件采取任何默认操作。这意味着,例如,如果您在 a 标记(链接)上使用 click 绑定,浏览器将只调用您的处理程序函数,而不会导航到链接的 href

var viewModel = {
    wantsSpam: ko.observable(true),
    spamFlavor: ko.observable('cherry'),
    /*click: function(){
      alert('Hi');
    }*/
};

Or

或者

var viewModel = {
    wantsSpam: ko.observable(true),
    spamFlavor: ko.observable('cherry'),
    click: function(){
      alert('Hi');
      return true;
    }
};