stopPropagation jQuery上的點擊處理程序

Question

如何才能停止傳播點擊一個未創建的div，直到其父div被點擊？

HTML

<div id = "parent"> Some Stuff </div> 

jQuery的

$('#parent').click(function(){ 
    $(this).append('<div class = 'button'> Button One </div>'); 
}); 

$('#parent').on('click', '.button', function(){ 
    // Do some stuff but stop propagation 
}); 

我必須在被追加到父元素的按鈕控制，但父元素也有自己的活動，以激發所見。如果e.stopPropagation不能在這裏使用，我可以做些什麼來防止按鈕觸發父事件？

Answer 1

可以扭轉其中創建#parent事件處理程序的順序：

$('#parent').on('click', '.button', function(){ 
    return false; 
}); 

$('#parent').click(function(){ 
    $(this).append('<div class = 'button'> Button One </div>'); 
}); 

現在#parent的.button事件處理程序的附加事件處理程序之前，將閃光。從此返回false（相當於e.stopPropagation和e.preventDefault）將停止運行第二個事件處理程序。

Demo here

Answer 2

如果我理解你的權利，你需要停止#parent格單擊事件當您單擊.button股利不添加更多.button div的

你可以做一個小檢查，如果e.target是.button，然後從#parent單擊處理

檢查例如

$('#parent').click(function(e){ 
    if($(e.target).is('.button')) 
     return; 
    alert('parentClick'); 
    $(this).append('<div class = "button"> Button One </div>'); 
}); 

$('#parent').on('click', '.button', function(){ 
    alert('buttonClick'); 
});