運行JavaScript的BTN而不是容器

Question

我有這樣的： http://jsfiddle.net/G3VjC/

這簡直是：

$(document).ready(function() { 

$(document).on('click','#btn',function(){ 
    console.log('ran btn'); 
}); 
$(document).on('click','#containerdiv',function(){ 
    console.log('ran div'); 
}); 

}）;

但是，當點擊按鈕運行btn JS和容器JS（請參閱控制檯日誌）。

我該如何區分它們？

感謝

Answer 1

使用stopPropagation()

$(document).on('click','.meee',function(e){ // add event as argument 
    console.log('ran btn'); 
    e.stopPropagation() 
}); 

Answer 2

試試這個

$(document).ready(function() { 
    $(document).on('click','#containerdiv',function(){ 
     console.log('ran div'); 

    }); 

    $(document).on('click','.meee',function(){ 
     console.log('ran btn'); 
     return false; 
    }); 
}); 

Demo

Answer 3

或者試試這個：

$(document).ready(function() { 
    $('#containerdiv').click(function(){ 
     console.log('ran div'); 
    }); 

    $('.meee').click(function(e){ 
      e.stopPropagation(); 
      console.log('ran btn'); 
    }); 
}); 

正如chumkiu已經說過，只是使用stopPropagation（）

Answer 4

$(document).on('click','#btn',function(e){ 
e.stoppropagation(); 
var target = $(e.target); 
if(!target.attr('id') == 'btn'){ 
e.preventDefault(); 
$(target.find("#btn)).trigger("click") 
} 
//any additional logic if the target was of the intended type. 
});