$().click()和$(document).on('click','要选择的元素',function(){})的不同
Posted caoxinfang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了$().click()和$(document).on('click','要选择的元素',function(){})的不同相关的知识，希望对你有一定的参考价值。
jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿 $().click()和$(document).on(‘click’,‘要选择的元素’,function(){})来说，都是点击事件的操作，但是也有不同的地方。
1. $(选择器).click(fn)
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。
1 <body>
2 <ul>
3 <li>1</li>
4 <li>2</li>
5 <li>3</li>
6 <li>4</li>
7 </ul>
8 <script src="jquery.min.js"></script>
9 <script>
10 $(function(){
11 $(‘ul>li‘).click(function(){
12 console.log($(this).html());
13 });
14 $(‘ul‘).append(‘<li>5</li><li>6</li>‘);
15 })
16 </script>
17 </body>
结果如下： 后面动态创建的5和6，没法进行点击事件触发。
2.$(document).on(‘click’,‘要选择的元素’,function(){})
on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
1 <body>
2 <ul>
3 <li>1</li>
4 <li>2</li>
5 <li>3</li>
6 <li>4</li>
7 </ul>
8 <script src="jquery.min.js"></script>
9 <script>
10 $(function(){
11 $(‘body‘).on(‘click‘,‘ul>li‘,function(){
12 console.log($(this).html());
13 });
14 $(‘ul‘).append(‘<li>5</li><li>6</li>‘);
15 })
16 </script>
17 </body>
以上是关于$().click()和$(document).on('click','要选择的元素',function(){})的不同的主要内容，如果未能解决你的问题，请参考以下文章
点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题
事件绑定方法和性能 $(document).on("click", "#id", fn) VS $("#id").on("clic
打开第二个时关闭下拉菜单/ document.click 被单击 Angular 5 阻止
jquery bind event， use on. $(document).on("click","#a",function(){alert}) [#d(代码
<script> function click() if (event.button==2) alert('你想看什麽？') document.onmousedow