javascript - JQuery 延迟一个事件以使用 `click` 事件处理程序检索 DOM 对象

Question

我的网络应用程序有两个问题，它们都是 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

Answer 1

可能与事件监听器的添加顺序有关。它们将按照添加到元素的顺序执行。

尝试添加小的延迟。

示例

$('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>