JQuery单击元素名称

Question

我使用以下引导按钮组：

<div class="btn-group btn-group-sm" data-toggle="buttons">
    <label class="btn btn-default active">
        <input name="act_con" value="No" checked="" booking_id="22" type="radio"><i class="fa fa-times"></i>
    </label>
    <label class="btn btn-default">
        <input name="act_con" value="Tel" booking_id="22" type="radio"><i class="fa fa-phone"></i>
    </label>
    <label class="btn btn-default">
        <input name="act_con" value="Email" booking_id="22" type="radio"><i class="fa fa-envelope-o"></i>
    </label>
</div>

我想在点击按钮时发生一些事情，所以我尝试以下方法：

$('input[name="act_con"]').click(function(){
    alert('hey');
});

然而，这仅适用于第一个按钮，我猜是因为三个按钮具有相同的名称，但它们需要是因为单选按钮。

这只适用于单独命名的元素吗？

我还尝试在输入中添加一个类并更改JQ以单击该类，但这不起作用

有没有办法让这项工作能让我在点击任何按钮时发生一些事情？

Here's a fiddle

Answer 1

试试这个：你点击了按钮图片，它是你代码中的标签元素，所以将click事件绑定到lable。此处标签为class="btn"。

最好在$(function(){ ...内调用jquery，以确保它在DOM准备好后执行。

$(function(){
  $('.btn').click(function(){
    alert('hey');
  });
});

<强> Demo

Answer 2

使用以下内容，因为点击了实际标签： Fiddle

$('input[name="act_con"]').parent('label').click(function () {
    alert('hey');
});

在这里，查找父label，然后点击它就会触发。

Answer 3

编辑您使用的是bootstrap吗？我注意到了经常带有引导程序的字体很棒的图标。如果是这样，样式会将输入设置为低于标签的z-index，并且不会收到点击事件。

我已将您的代码添加到jsfiddle，看起来您的点击处理程序工作得很好。您应该尝试检查错误日志，因为可能存在其他问题。或者，您的浏览器可能配置为忽略重复的警报消息。如果你曾经看到弹出窗口出现并勾选复选框，它会这样做（请参考下图）

您还应该考虑的其他事情是使用事件委派而不是将单击处理程序附加到每个输入。这是更高效的，通常是javascript中更好的练习，在jQuery中很容易做到。更新后的代码如下所示：

$(function() {
  $('.btn-group').on('click', 'input[name="act_con"]',function(){
    alert('hey');
  });
});

编辑还在dom ready处理程序的jquery中包含dom相关代码，以避免选择可能尚未加载的元素时出现问题。

Answer 4

试试这个

 $('label.btn ').click(function () {
   alert( $(this).find("[type=radio]").val());
   //it will return "no" or "tel","email"
});

DEMO