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')并且应该使用一个简单的手册{{3}呼叫：

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

演示：.fadeOut

Bootstrap-alert解除父容器

1 个答案: