jQuery移动单选按钮更改事件即使已选中也始终会触发
jQuery移动单选按钮更改事件即使已选中也始终会触发
提问于 2015-06-17 15:54:42
我使用一个包含两个单选按钮的单选按钮组来动态地更改页面的内容，具体取决于选中哪个单选按钮。当选定的单选按钮更改时，应更新内容。为此，我在单选按钮中添加了一个事件处理程序。
html：
<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center" >
<input name="radio" id="radio-a" type="radio" >
<label for="radio-a">a → b</label>
<input name="radio" id="radio-b" type="radio">
<label for="radio-b">b → a</label>
</fieldset>jQuery：
$(document).ready(function() {
$(":input[name= 'radio']").on('change', function(){
alert("DO SOMETHING");
});
});如果我使用一些没有jQuery手机的单选按钮，一切都如预期的那样工作。只有当我选择未选中的单选按钮时，才会触发更改事件。如果我点击一个已经选中的单选按钮，什么都不会发生。
有关演示，请参阅下面的“小提琴”：https://jsfiddle.net/6cnLgonk/21/
如果我现在包括js和css of jQuery mobile，则更改事件总是会触发，无论单选按钮是否已经选中：https://jsfiddle.net/6cnLgonk/19/注意到代码完全相同，我只链接了jQuery移动文件以让单选按钮自动获得样式。
所需的行为是仅在尚未选中单选按钮的情况下触发更改事件。如何使用jQuery移动样式的单选按钮来完成这一任务？
jQuery移动js是否以某种方式覆盖更改事件？我必须手动设置单选按钮吗？谢谢你的回答。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-17 18:00:41
jQuery移动实际上用label元素替换了无线电输入，它将单击处理程序添加到这些标签中，然后触发底层单选按钮上的更改事件。
您可以向每个单选按钮添加一个value属性：
<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center" >
<input name="radio" id="radio-a" type="radio" value="a" />
<label for="radio-a">a → b</label>
<input name="radio" id="radio-b" type="radio" value="b" />
<label for="radio-b">b → a</label>
</fieldset>然后可以保存当前的选择，然后检查它：
var CurrentSelection;
$(document).ready(function() {
$(":input[name= 'radio']").on('change', function(){
var clicked = $(this).val();
if (clicked != CurrentSelection){
CurrentSelection = clicked;
alert("DO SOMETHING");
}
});
});更新的小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30896576
复制相关文章
相似问题
腾讯云开发者
