jquery中on动态绑定阻止冒泡事件异常

93 阅读 0 评论 62 点赞

我是靠谱客的博主哭泣鞋子，这篇文章主要介绍jquery中on动态绑定阻止冒泡事件异常，现在分享给大家，希望可以做个参考。

绪论：如果动态生成的元素用on来绑定事件，会根据selector不同，阻止冒泡的结果也不同。

公共html代码和css样式如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.item{width:500px;height: 50px;background-color: lightsalmon;margin-top: 10px;line-height: 50px;}
.delete{width: 50px;height: 50px;background-color: lightgreen;}
</style>
</head>
<body>
<button>添加一个LI</button>
<ul class="ulwrap">
<li class="item"><em>1</em><span class="delete">删除</span></li>
<li class="item"><em>2</em><span class="delete">删除</span></li>
<li class="item"><em>3</em><span class="delete">删除</span></li>
<li class="item"><em>4</em><span class="delete">删除</span></li>
<li class="item"><em>5</em><span class="delete">删除</span></li>
<li class="item"><em>6</em><span class="delete">删除</span></li>
  </ul>
</body>

复制代码

1
2
3
4
5
6
7
8
9
10

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').on("click",function(){
var lis = $('.item').length + 1;
var newLi = '<li class="item" οnclick="deleteFn()"><em>'+lis+'</em><span class="delete">删除</span></li>';
$('.ulwrap').append(newLi);
});
})

1、父节点绑定的父元素selector大于子元素绑定的selector，即父节点绑定的父元素大于子元素绑定的父元素，阻止冒泡正常

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
 //能阻止冒泡，父元素的selector>子元素的selector
$('.item').on('click','.delete',function(){
var n = $(this).parent().index();
alert("删除第几个==" +
n);
$(this).parent().remove();
event.stopPropagation();
});
$('.ulwrap').on("click",'.item',function(){
var n = $(this).index();
alert("li第几个==" + n);
});

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

//可以能阻止冒泡，父元素的selector>子元素的selector
$('.ulwrap').on('click','.delete',function(){
var n = $(this).parent().index();
alert("删除第几个==" +
n);
$(this).parent().remove();
event.stopPropagation();
});
$('body').on("click",'.item',function(){
var n = $(this).index();
alert("li第几个==" + n);
});

2、父元素和子元素绑定的父节点为同一个；不能阻止冒泡

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

//不可以能阻止冒泡，父元素的selector=子元素的selector
$('.ulwrap').on('click','.delete',function(){
var n = $(this).parent().index();
alert("删除第几个==" +
n);
$(this).parent().remove();
event.stopPropagation();
});
$('.ulwrap').on("click",'.item',function(){
var n = $(this).index();
alert("li第几个==" + n);
});

3、父元素绑定的节点<子元素绑定的父节；不能阻止冒泡

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

//不能阻止冒泡，父元素的selector<子元素的selector
$('body').on('click','.delete',function(){
var n = $(this).parent().index();
alert("删除第几个==" +
n);
$(this).parent().remove();
event.stopPropagation();
});
$('.ulwrap').on("click",'.item',function(){
var n = $(this).index();
alert("li第几个==" + n);
});

结论：子元素事件中需要添加event.stopPropagation();

1、父节点绑定的父元素大于子元素绑定的父元素，阻止冒泡正常

2、父元素和子元素绑定的父节点为同一个；不能阻止冒泡

3、父元素绑定的节点<子元素绑定的父节；不能阻止冒泡