jQuery .on() 메서드가 부트 스트랩으로 실패합니다.

내 페이지에 부트 스트랩을 포함하기 전에 완벽하게 작동하는 두 개의 라디오 버튼이 있습니다. 부트 스트랩이 단순한 .on() jQuery 메서드를 방해하는 이유를 모르겠습니다 ... onClick과 같은 여러 가지 다른 메서드를 시도했기 때문에 열광했습니다.jQuery .on() 메서드가 부트 스트랩으로 실패합니다.

부트 스트랩 라이브러리는 I가 포함했습니다

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

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

JQuery와는 부트 스트랩 포함하기 전에 작동 테스트에 사용,210

나는 (부트 스트랩 포함하지 않고) 아래 라이브 테스트를위한 코드를 추가 한 : 당신이 JQuery와 한 후에 부트 스트랩 JS를 포함해야

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

내가 ... 왜 부트 스트랩 간단한 CSTE 연구진() jQuery를 방법 방해 확실하지 않다
"부트 스트랩은"각각의 무선 입력 요소에 대해 다음 두 가지 스타일을 추가하기 때문에 발생

clip: rect(0,0,0,0)는 : 클립 CSS 속성은 요소의 일부분이 볼을 정의.

pointer-events: none : CSS 속성 인 pointer-events를 사용하면 제작자는 특정 그래픽 요소가 마우스 이벤트의 대상이 될 수있는 환경 (있는 경우)을 제어 할 수 있습니다. 이 두 가지 스타일을 제거하거나 다른 방법을 고려

지금, 당신은 두 가지 전략이있다.

라디오 버튼은 라벨 안에 포함되어 있습니다. 각 클릭 이벤트는 레이블 또는 앵커에서 캡처되고 아무것도 라디오 버튼에 전달되지 않습니다.

이 이벤트 핸들러는 라벨에 첨부되어야 함을 의미 :

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

확인. 예 : here을 참조하십시오. 또한 jQuery 버전 호환성을 확인하십시오. 예를 들어, 2.2.1을 사용하고 있지만 부트 스트랩 1.12를 사용 중입니다.

출처

2017-02-09 17:28:02 zhukva

jQuery .on() 메서드가 부트 스트랩으로 실패합니다.

답변

관련 문제