简单说下事件委托与阻止冒泡
html:
全部 纽约 洛杉矶 拉斯维加斯 夏威夷 旧金山 奥兰多 西雅图
js:
$(ul[data-type='citypick']).on('click',function(){ alert(父元素ul被点击); }); $(ul[data-type='citypick']).on('click','li',function(){ alert(子元素li被点击); });
当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的。
解决：
$(ul[data-type='citypick']).on('click',function(){ alert(父元素ul被点击); }); $(ul[data-type='citypick']).on('click','li',function(e){ e.stoppropagation();//阻止冒泡 alert(子元素li被点击); });
加一句阻止冒泡即可。