jquery - .fadeOut() 不起作用

Question

当用户单击“否”时，我的 .fadeOut() 无法正常工作，我知道这是因为 div.confirm 嵌入了span，这是调用 .fadeIn() 函数的地方。

我正在开发一个需要此 HTML 层次结构的项目，但我需要使用“否”按钮来 .fadeOut() 确认框。

Non-working Fiddle

我的 HTML:

<span>Delete File
<div class="confirm">Are you sure?
  <div class="yes">
   Yes
  </div>
  <div class="no">
   No
  </div>
</div>
</span>

JS:

$('span').click(function () {
    $('.confirm').fadeIn(100);
});

$('.no').click(function () {
    $('.confirm').fadeOut(100);
})

Answer 1

您需要使用e.stopPropagation();

$('span').click(function () {
    $('.confirm').fadeIn(100);
});

$('.no').click(function (e) {
    e.stopPropagation();
    $('.confirm').fadeOut(100);
});

Working Demo

并且，如果您可以使用多个跨度，则更清楚

$('span').click(function () {
    $(this).find('.confirm').fadeIn(100);
});

$('.no').click(function (e) {
    e.stopPropagation();
    $(this).closest('.confirm').fadeOut(100);
})

Working Demo