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

最新推荐文章于 2020-09-23 11:38:49 发布

贴图入人

最新推荐文章于 2020-09-23 11:38:49 发布

阅读量596

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_44947814/article/details/89451223

本文探讨了在动态生成的元素上使用jQuery的on方法绑定事件时，如何通过不同的选择器设置来控制事件冒泡行为，包括阻止冒泡的条件与效果。分析了父元素与子元素事件绑定的选择器大小、相同或子级对冒泡的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<!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>

   <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" "deleteFn()"><em>'+lis+'</em><span class="delete">删除</span></li>';         $('.ulwrap').append(newLi);        });})

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

 //能阻止冒泡，父元素的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);  });

  //可以能阻止冒泡，父元素的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、父元素和子元素绑定的父节点为同一个；不能阻止冒泡

  //不可以能阻止冒泡，父元素的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、父元素绑定的节点<子元素绑定的父节；不能阻止冒泡

  //不能阻止冒泡，父元素的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);  });