부트 스트랩 알림이 부모 컨테이너를 닫습니다.

Question

부트 스트랩 알림 플러그인이 실제로 이상하게 작동합니다.

.flashes 
    .message.fade.in 
    %p Hi there! 

그리고 커피 : 매우 간단

jQuery -> 
    $('.flashes').on 'click', '.message', -> 
    $(this).alert('close') 

내가 HAML 구조를 다음했다. alert('close') 전화를 걸면 .message 요소를 클릭하기 만하면됩니다. 그러나 플러그인은 전체 .flashes 블록을 닫습니다. 알아낼 수 없다. 무엇이 잘못되었는지. 누군가?

Answer 1

분명히 $(x).alert('close')은 x이 실제 경고 상자가 아닌 닫기 버튼이 될 것으로 예상하므로 x의 부모 요소를 닫습니다.

<div class="flashes"> 
    <div class="message fade in"> 
     <p>Hi <span>there!</span></p> 
     <p>Where is pancakes house?</p> 
    </div> 
</div> 

이 커피 스크립트 : 클릭이 처음 <p>을 닫고, .flashes.message을두고 혼자 두 번째 <p> 것

$('.flashes').on 'click', '.message', -> 
    $(@).find('span').alert('close')​​​ 

예를 들어, HTML을 제공합니다.

데모 : http://jsfiddle.net/ambiguous/JJbCz/

그러나 당신이 첫 번째 자식에 .alert('close')에 커피 스크립트를 변경하는 경우 :

$('.flashes').on 'click', '.message', -> 
    $(@).find(':first-child').alert('close') 

다음 당신은 당신이 기대하고있는 결과를 얻을 수 있습니다.

데모 : 난 아무데도 당신이 경고에 무엇을 포장하고 그 표시되지 않습니다 http://jsfiddle.net/ambiguous/wm6jh/

(즉 $(x).alert()을) 그래서 아마 당신은 단지에 대한 .alert('close')을 남용하고 간단한 수동 .fadeOut 호출을 사용한다 :

$('.flashes').on 'click', '.message', -> 
    $(@).fadeOut('slow') 

데모 : http://jsfiddle.net/ambiguous/uhV6P/