JQuery事件绑定方式

最新推荐文章于 2024-05-25 13:36:04 发布

lizhuan416520

最新推荐文章于 2024-05-25 13:36:04 发布

阅读量92

点赞数

分类专栏： JQuery 文章标签： JQuery事件绑定的几种方式与对比

本文链接：https://blog.csdn.net/u014435515/article/details/97313886

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、$('.c').click()

2、$('.c').bind('click',function(){});$('.c').unbind('click',function(){});

3、$('.c').on('click',function(){});$('.c').off('click',function(){});

4、$('.c').delegate('a','click',function(){});$('.c').undelegate('a','click',function(){});

前三种绑定事件的方式一样，最后一种是委托的方式。

前三种对新添加的标签，不会绑定事件；最后一种利用委托的方式，在运行时对标签绑定事件，新增标签同样绑定。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery事件绑定</title>

</head>
<body>
   <input id="t1" type="text"/>
   <input id="a1" type="button" value="添加"/>
   <ul id="u1">
       <li>1</li>
       <li>2</li>
   </ul>
   <script src="../lib/jquery-3.4.1.min.js"></script>
   <script>
       $("#a1").click(function(){
           var v=$("#t1").val();
           var temp="<li>"+v+"</li>";
           $("#u1").append(temp);
       });
       
           
           
       

       
           
           
       

       
           
           
       

       $("ul").delegate("li","click",function(){
           var v=$(this).text();
           alert(v);
       });
   </script>
</body>
</html>