$().click()和$().on('click','要选择的元素'，function(){})的区别
demiling
于 2018-10-24 10:43:33 发布
7810
收藏 9
分类专栏： 每天总结 文章标签： jquery
版权
每天总结
专栏收录该内容
10 篇文章1 订阅
订阅专栏
$(选择器).click(function(){})：页面中已经存在的DOM。
$(ducument).on(‘click’,‘要选择的元素’,function(){})：动态创建的元素也能触发事件，
且ducument在页面已经存在，而不是动态添加的。
on方法包含很多事件，点击，双击等等事件。
下面举例子说明：
//CSS可忽略
<!doctype html>
<html>
<head>
<style>
ul{
list-style: none;
display: flex;
}
ul li{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: pink;
font-weight: bold;
border: 1px solid #eee;
}
ul li:hover{
cursor: pointer;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script>
/*
$('li').click(function(){
alert($(this).text())
})
$('ul').append('<li>6</li>')
*/
//上面这段js运行后，第6个li添加了进去，但是没有click点击事件
//----------- 分割线 --------------
//ul是已经存在的
$('ul').on('click','li',function(){//这里改为用on()方法，第6个li也有了点击事件
alert($(this).text())
})
$('ul').append('<li>6</li>')
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「demiling」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/demiling/article/details/83311633