.fadeOut()不起作用

Question

.fadeOut()当用户点击"否"时我遇到了问题,我知道这是因为div.confirm它嵌入了调用函数的span地方.fadeIn().

我正在开发一个需要这个HTML层次结构的项目,但我需要"否"按钮到.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);
});

工作演示

并且,更清楚的是,如果您有多个跨度,则可以使用

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

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

工作演示