Loading

$().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>

 

posted @ 2020-06-20 19:22  ixfcao  阅读(345)  评论(0)    收藏  举报