我的网络应用程序有两个问题,它们都是 radio 输入类型,但采用 Bootstrap 按钮的外观和一些属性。
每次单击时,我想检查页面上选定的两个按钮是哪一个。
当我单击标签时,标签 label
接收类 .active
(我猜来自 Bootstrap 框架)。我想用它来过滤用户每次点击时选择的两个按钮。
- 问题是,如果我单击选项 1,第一次单击时,按钮会处于事件状态,但 jQuery 无法检索该元素。
- 然后,如果我重新单击选项 1 或选项 2,它将正确找到元素选项 1(即使我单击了选项 2)。
我单击的选项和 jQuery 找到的内容之间存在一步延迟。
这是 JS
注意:我还尝试通过过滤 input
标记的类 checked
并观察完全相同的行为
$(function() {
$("label.btn").click(function() {
console.log($("label.active").children()[0].id);
});
})
这是生成 HTML 的哈巴狗
.btn-group(data-toggle='buttons')
label.btn.btn-primary
input#option1(type='radio', name='lorem')
|Option 1
label.btn.btn-primary
...
注意:
等待答案被编辑...解决方案是将 click
替换为 change
最佳答案
可能与事件监听器的添加顺序有关。它们将按照添加到元素的顺序执行。
尝试添加小的延迟。
示例
$('button').click(function(){
var $btn = $(this)
console.log('Has class when clicked = ', $btn.hasClass('active'));
setTimeout(function(){
console.log('Has class after small delay = ', $btn.hasClass('active'));
},20);
}).click(function(){
// will add class after first click handler is fired
$(this).addClass('active')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
关于javascript - JQuery 延迟一个事件以使用 `click` 事件处理程序检索 DOM 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43436726/