Метод jQuery .on() не работает с bootstrap

Question

У меня есть два переключателя, которые отлично работали, прежде чем включать загрузку в мою страницу. Я не уверен, почему bootstrap будет вмешиваться в простой метод .on() jQuery ... Это сводит меня с ума, потому что я пробовал различные другие методы, такие как onClick, и он тоже не работал.

Бутстраповское библиотека Я включил:

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

Я добавил код для живого тестирования ниже (без начальной загрузки в комплекте):

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

Я не уверен, почему самозагрузки будет мешать простой .on() JQuery метод ...

Это происходит потому, что «boostrap» добавляет следующие два стиля для каждого входного радио элемента:

• clip: rect(0,0,0,0): СМЧ свойство клипа определяет, какая часть элемента видна.

• 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>

Answer 2

Убедитесь, что вы должны включить бутстраповские JS ПОСЛЕ JQuery один. См. Пример here. Также проверьте совместимость версии jquery, в вашем примере вы используете 2.2.1, но в bootstrap 1.12.