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、相关知识
-
事件绑定
on() 为某些元素绑定一个事件或者多个事件。该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
-
事件解绑
off() 解除绑定的某一指定的事件或者所有事件。“绑定”与“解绑”是相反的关系。在jQuery中,我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。
对同一元素绑定的多个同一事件进行解绑,可以使用命名空间解决,例如‘click.a’‘click.b’
-
事件委托
通过事件冒泡,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行处理。
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>