jQuery .on() 方法因引导而失败答案

【问题标题】：jQuery .on() method fails with bootstrapjQuery .on() 方法因引导而失败
【发布时间】：2017-06-27 20:05:37
【问题描述】：

在将引导程序包含到我的页面之前，我有两个单选按钮工作得非常好。我不确定为什么 bootstrap 会干扰一个简单的 .on() jQuery 方法...这让我发疯了，因为我尝试了各种其他方法，例如 onClick，但它也不起作用。

我包含的引导库：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在包含 Bootstrap 之前用于测试的 jQuery：

$(document).ready(function(){
    $('#button2').on('click', function () {
        alert('it works!');
    });

    $('#button1').on('click', function () {
        alert('it works!');
    });
});

测试 HTML：

<div class='btn-group oneLine' data-toggle='buttons'>
    <label class='btn btn-primary'>
        <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a>
    </label>

    <label class='btn btn-primary'>
        <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a>
    </label>
</div>

我在下面添加了用于实时测试的代码（不包括引导程序）：

$(document).ready(function(){
  $('#button2').on('click', function () {
    alert('it works!');
  });

  $('#button1').on('click', function () {
    alert('it works!');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='btn-group oneLine' data-toggle='buttons'>
  <label class='btn btn-primary'>
    <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a>
  </label>

  <label class='btn btn-primary'>
    <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a>
  </label>
</div>

【问题讨论】：

标签： jquery twitter-bootstrap button onclick radio

【解决方案1】：

我不确定为什么 bootstrap 会干扰一个简单的 .on() jQuery 方法...

这是因为“boostrap”为每个单选输入元素添加了以下两种样式：

clip: rect(0,0,0,0)：clip CSS 属性定义了元素的哪些部分是可见的。

pointer-events: none：CSS 属性指针事件允许作者控制在什么情况下（如果有）特定图形元素可以成为鼠标事件的目标。

现在，您有两个策略：删除这两种样式或考虑另一种方法。

您的单选按钮包含在标签内。每个点击事件都是从标签或锚点捕获的，并且没有任何内容传递给单选按钮。

这意味着事件处理程序必须附加到标签上：

$('#button2').closest('.btn')

您可以使用Attribute Starts With Selector 和querySelector 减少代码行数。

另一种方法是直接使用标签。

sn-p：

$(document).ready(function(){
  $('[id^="button"]').closest('.btn').on('click', function () {
    console.log(this.querySelector('input').id + ': it works!');
  });

  $('div.btn-group.oneLine label.btn').on('click', function () {
    console.log('An alternative way is to use the label: ' + this.querySelector('input').id + ': it works!');
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class='btn-group oneLine' data-toggle='buttons'>
    <label class='btn btn-primary'>
        <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a>
    </label>

    <label class='btn btn-primary'>
        <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a>
    </label>
</div>

【讨论】：

哇！很棒的答案。非常感谢！
@theflarenet 答案已更新：我希望现在清楚原因。

【解决方案2】：

检查你是否应该在 jquery 之后包含 bootstrap js。请参阅示例here。还要检查 jquery 版本兼容性，在您的示例中，您使用的是 2.2.1，但在引导程序 1.12 中。

【讨论】：