绪论：如果动态生成的元素用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); });}) //能阻止冒泡，父元素的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); }); //不可以能阻止冒泡，父元素的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); }); //不能阻止冒泡，父元素的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); });1、父节点绑定的父元素大于子元素绑定的父元素，阻止冒泡正常
2、父元素和子元素绑定的父节点为同一个；不能阻止冒泡
3、父元素绑定的节点<子元素绑定的父节；不能阻止冒泡