jQuery .on() 方法失败 bootstrap

Question

我有两个单选按钮，在将 bootstrap 包含到我的页面之前效果很好。我不确定为什么 bootstrap 会干扰一个简单的 .on() jQuery 方法......这让我发疯，因为我已经尝试过各种其他方法，比如 onClick 但它也没有工作。

我包含的 bootstrap 库：

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

之前用于测试的jQuery包括Bootstrap:

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

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

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

Answer 1

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

中

Answer 2

I'm not sure why bootstrap would interfere with a simple .on() jQuery method...

发生这种情况是因为 "boostrap" 为每个单选输入元素添加了以下两种样式：

clip: rect(0,0,0,0): the clip CSS property defines what portion of an element is visible.

pointer-events: none: The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

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

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

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

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

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

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

片段：

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

jQuery .on() 方法失败 bootstrap

jQuery .on() method fails with bootstrap

jquery

onclick

button

radio

twitter-bootstrap