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。我的问题是，当我点击do B链接时，我似乎无法edit。它总是do A。我添加了stopPropagation但仍无效。有人可以帮我这个吗？非常感谢！

Answer 1

我可能错了，我相信其他人会纠正我，但是，根据你的代码＆＃34;编辑＆＃34;作为一个班级。

引用课程时，它会是$（＆＃39; .edit＆＃39;）。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       
})

如何在div中添加链接？

4 个答案: