어떻게하면 boostrap alert dismiss가 작동합니까?

Question

Here 부트 스트랩에 대한 예는 해고입니다 :

<div class="alert alert-warning alert-dismissible" role="alert"> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
     <span aria-hidden="true">&times;</span></button> 
    <strong>Warning!</strong> Better check yourself, you're not looking too good. 
</div> 

내가 button에 부착하는 방법 자바 스크립트 처리기를 알아 보았하지 않습니다는 div elemnt 닫으을 결정합니다. div 개의 요소가있는 경우 class="alert alert-warning alert-dismissible" 및 role="alert" - 프레임 워크가 숨길 올바른 요소를 감지하는 방법은 무엇입니까?

P.role="alert"을 제거하면 안정적으로 작동합니까?

Answer 1

버튼이 경고 소자 내부와 그 부모 (들)의 이벤트 리스너가 용이 형제 등의 해당 요소에서 이벤트가 발생 소자 및 이송을 분리 할 수 ​​

워크없이

간단한 예 :

$('.alert .myButton').click(function() { 
 
    // "this" is instance of myButton event occured on 
 
    $(this).closest('div.alert').hide() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="alert"> 
 
    Content 1 <button class="myButton">Hide Content 1</button> 
 
</div> 
 

 
<div class="alert"> 
 
    Content 2 <button class="myButton">Hide Content 2</button> 
 
</div>