กดปุ่ม create button ก็จะสร้าง element สี่เหลี่ยมสีน้ำเงินและมีปุ่ม Click for test alert อยู่ภายใน.. เมื่อกดปุ่มดังกล่าวนี้ก็จะโชว์ Alert ข้อความขี้นมา
ปัญหาของผมก็คือ เมื่อคลิกที่ element สี่เหลี่ยมสีน้ำเงิน มันจะโชว์ Alert ข้อความขี้นมาด้วยเช่นกันซึ่งผมไม่ต้องการ จะแก้ไขอย่างไรดีครับ
<head>
<script src = 'jquery-2.1.4.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#aa').click(function(){
create1();
});
$('#bb').on('click',$('#cc'),function(){
alert('now click button');
});
});
function create1(){
var abc;
abc = "<div style='width:200px; background:blue; text-align:center; padding:50px;'>";
abc += " <button id='cc' type='button'>Click for test alert</button>";
abc += "</div>";
$('#bb').html(abc);
}
</script>
</head>
<body>
<button id='aa' type='button'>create button</button><HR>
<div id='bb'></div>
</body>
jquery กับปัญหา Event Bubbling ช่วยทีครับ
ปัญหาของผมก็คือ เมื่อคลิกที่ element สี่เหลี่ยมสีน้ำเงิน มันจะโชว์ Alert ข้อความขี้นมาด้วยเช่นกันซึ่งผมไม่ต้องการ จะแก้ไขอย่างไรดีครับ
<head>
<script src = 'jquery-2.1.4.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#aa').click(function(){
create1();
});
$('#bb').on('click',$('#cc'),function(){
alert('now click button');
});
});
function create1(){
var abc;
abc = "<div style='width:200px; background:blue; text-align:center; padding:50px;'>";
abc += " <button id='cc' type='button'>Click for test alert</button>";
abc += "</div>";
$('#bb').html(abc);
}
</script>
</head>
<body>
<button id='aa' type='button'>create button</button><HR>
<div id='bb'></div>
</body>