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

​</p>