微信扫一扫打赏支持

js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

一、总结

一句话总结：通过事件委托的方式，通过on方法

 

1、on方法在事件绑定的时候，data方式带额外参数时，字符串参数和其它参数的使用不一样，为什么？

因为字符串参数默认会被当成动态生成元素的事件绑定方法，所以需要在前面添加参数null。

64         $('#btn1').on('click',null,'div',function(e){
65             alert('事件绑定'+e.data)
66         })

对比一下额外参数的json对象

44 //额外数据
45     // $('#btn1').on('click',{name:'张三'},function(e){
46     //     alert('事件绑定'+e.data.name)
47     // })

 

2、jquery如何给动态创建出来的元素绑定事件？

参数里面的第一个div是给动态生成的div绑定事件，第二个div是传递的额外参数。

59         $(document).on('click','div','div',function(e){
60             alert('事件绑定'+e.data)
61             $(this).css('background','orange')
62         })

 

3、on方法如何使用？

事件名字符串，函数或者函数名，

中间参数为动态绑定事件的元素，比如div，后面是传递的额外参数

59         $(document).on('click','div','div',function(e){
60             alert('事件绑定'+e.data)
61             $(this).css('background','orange')
62         })

 

 

 

二、jquery如何给动态创建出来的元素绑定事件

1、相关知识

  1. 事件绑定
    on() 为某些元素绑定一个事件或者多个事件。

    该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

  2. 事件解绑
    off() 解除绑定的某一指定的事件或者所有事件。

    “绑定”与“解绑”是相反的关系。在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。

    对同一元素绑定的多个同一事件进行解绑，可以使用命名空间解决，例如‘click.a’‘click.b’

  3. 事件委托
    通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。
 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10         input{width: 100px;height: 30px;}
11         div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
12       </style>
13 </style>
14 </head>
15 <body>
16 <h3>jQuery事件对象</h3>
17 <input id="btn1" type="button" value="事件绑定"><br>
18 <div></div>
19 <script type="text/javascript">
20     $(function(){
21         /*    
22         $('#btn1').on('click',fn1)
23         $('#btn1').on('click',fn2)
24         function fn1(){
25             alert('事件绑定1')
26         }
27         function fn2(){
28             alert('事件绑定2')
29         }
30         $('#btn1').off('click',fn1)    
31         
32     //命名空间
33         $('#btn1').on('click.a',function(){
34             alert('事件绑定1')
35         })
36         $('#btn1').on('click.b',function(){
37             alert('事件绑定2')
38         })
39         $('#btn1').on('mouseover.a',function(){
40             $(this).css('background','orange')
41         })
42         $('#btn1').off('.a')
43 
44 //额外数据
45     // $('#btn1').on('click',{name:'张三'},function(e){
46     //     alert('事件绑定'+e.data.name)
47     // })
48     $('#btn1').on('click','abc',function(e){
49         alert('事件绑定'+e.data)
50     })
51 
52     //动态绑定事件
53         $('#btn1').on('click',function(e){
54             $("<div></div>").appendTo($('body'))
55         })
56         // $('div').on('click',function(){
57         //     $(this).css('background','orange')
58         // })
59         $(document).on('click','div','div',function(e){
60             alert('事件绑定'+e.data)
61             $(this).css('background','orange')
62         })
63 */
64         $('#btn1').on('click',null,'div',function(e){
65             alert('事件绑定'+e.data)
66         })
67     })
68 </script>
69 </body>
70 </html>

 

 

 

 
posted @ 2018-10-08 12:28  范仁义  阅读(1683)  评论(0)  编辑  收藏  举报