jQuery .on（）方法失败，引导程序

我有两个单选按钮，在将引导程序包含到我的页面之前工作得很好。我不知道为什么bootstrap会干扰一个简单的.on（）jQuery方法......它让我疯狂，因为我尝试了像onClick这样的其他方法，但它也无法工作。jQuery .on（）方法失败，引导程序

自举库我已经包括：

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

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>

来源

2017-02-09 theflarenet

我不知道为什么会举一个简单的。对（）jQuery的方法干扰......

这是因为“自举”增加了下面两种风格的每个无线输入元素：

clip: rect(0,0,0,0)：剪辑CSS属性定义了一个元件的一部分是可见的。

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

现在，你有两种策略：去除这两种风格或考虑另一种方法。

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

这意味着该事件处理程序必须连接到标签：

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

您可以使用Attribute Starts With Selector和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>

来源

2017-02-09 17:38:01 gaetanoM

哇！神奇的答案。非常感谢你！ – theflarenet

@theflarenet答案更新：我希望现在很清楚原因。 – gaetanoM

检查，你应该包括引导JS jQuery的一前一后。见示例here。同时检查jquery版本的兼容性，在你使用2.2.1的例子中，但在bootstrap 1.12中。

来源

2017-02-09 17:28:02 zhukva

jQuery .on（）方法失败，引导程序

回答

相关问题