Bootstrap-alert 关闭父容器答案

【问题标题】：Bootstrap-alert dismisses parent containerBootstrap-alert 关闭父容器
【发布时间】：2012-11-19 03:09:28
【问题描述】：

Bootstrap-alert 插件的工作方式非常奇怪。我有以下haml结构：

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

还有一些咖啡：

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

很简单。我希望调用alert('close') 只会关闭单击的.message 元素。但是插件关闭了整个 .flashes 块。想不通，有什么问题。有人吗？

【问题讨论】：

标签： jquery html twitter-bootstrap coffeescript haml

【解决方案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/

【讨论】：