Bootstrap-alert解除父容器

Question

Bootstrap-alert插件的工作真的很奇怪。我有以下HAML結構：

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

還有咖啡：

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

很簡單。我希望調用alert('close')將只解僱點擊.message元素。但插件關閉整個.flashes塊。無法弄清楚，它有什麼問題。任何人？

Answer 1

顯然$(x).alert('close')預計x是一個關閉按鈕 - 不是實際的警報框 - 因此它關閉x的父元素。例如，給這個HTML：

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

這CoffeeScript的：

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

點擊將關閉第一<p>和離開.flashes，.message，並僅在第二<p>。

演示：http://jsfiddle.net/ambiguous/JJbCz/

但是，如果你改變的CoffeeScript到.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/