.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

Answer 2

一個簡單的解決方案是移動.confirm格的跨度之外 - 它應該避免這次跨度事件的發射並且仍然工作得很好。

Yey-working fiddle

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