.fadeOut() 不工作

Question

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

我正在做一个需要这个 HTML 层次结构的项目，但我需要 "No" 按钮到 .fadeOut() 确认框。

我的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

Answer 2

一个简单的解决方案是将 .confirm div 移到 span 之外 - 它应该可以防止触发 span 的事件并且仍然可以正常工作。

Yey-working fiddle

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

.fadeOut() 不工作

.fadeOut() not working

jquery

fadeout