如何在div中添加鏈接？

Question

我對事件冒泡有疑問。

我有喜歡的html

<div id='title-bar1'> 
    title bar
   <div class='editDiv'>
        <a class='edit' href='#'>Edit</a>
   </div>
</div>


$('#edit').on('click', function(e){
     e.stopPropagation();
       //do B
})


$('#title-bar1').on('click', function(e){
    e.preventDefault();
    //do A       
})

title-bar1是包裝edit鏈接的div。 我的問題是，當我單擊edit鏈接時，我似乎無法do B 。 它總是do A 我添加了stopPropagation ，但仍然無法正常工作。 有人可以幫我嗎？ 非常感謝！

Answer 1

我對此可能是錯的，但是我相信會有其他人糾正我，但是根據您的代碼，您將“編輯”作為一個類。

當引用一個類時，它將是$（'。edit'）。onclick

在CSS中，要修改具有id = edit的元素，可以執行#edit {color：red;}

如果一個類是.edit {color：red; }

因此，停止傳播的功能永遠不會啟動。

Answer 2

<div id='title-bar1'> 
    title bar
   <div class='editDiv'>
        <a class='edit' href='#'>Edit</a>
   </div>
</div>


$('.edit').on('click', function(e){
     e.stopPropagation();
       //do B
})


$('#title-bar1').on('click', function(e){
    e.preventDefault();
    //do A       
})

Answer 3

更改：

$('#edit').on('click', function(e){
 e.stopPropagation();
   //do B

}）

至：

$('.edit').on('click', function(e){
 e.stopPropagation();
   //do B

}）

類=。 //在選擇器之前

ID =＃//選擇器之前

希望這可以幫助！

Answer 4

<div id='title-bar1'> 
    title bar
   <div class='editDiv'>
        <a class='edit' href='#'>Edit</a>
   </div>
</div>


$('.edit').on('click', function(e){
// ^edit is a class not an id
     e.stopPropagation();
       //do B
})


$('#title-bar1').on('click', function(e){
    e.preventDefault();
    //do A       
})