This article mainly introduces how to use jquery event delegation, which has certain reference value. Now I share it with everyone. Friends in need can refer to it
Through event bubbling, let the event bound to the child element bubble up to the parent element (or ancestor element) and then process it.
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
Add events to dynamic elements
Events are only bound once, which is highly efficient (for a large number of elements of the same type that need to be bound, the efficiency is very high, such as a table of 2500td, and events must be bound to each td)
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
To execute an event, for example, to bind events to a large number of TDs, the object of the event delegation is its ancestor, which is the table table
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
The code to add events to the code generation element must be after the code is generated, so that it can bind events
73 //如果不是动态创建的,可以直接绑定事件 74 $('<p></p>').appendTo($('body')) 75 $('<p></p>').appendTo($('body')) 76 $('<p></p>').appendTo($('body')) 77 $('p').on('click',function(){ 78 $(this).css('background','orange') 79 })
There are many tds in a table. To bind events to tds, if you use the method of binding events to each td, it is very inefficient and error-prone. It is particularly convenient to use event delegation. One step in place.
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
html code append method
87 $('#btn1').click(function(){ 88 $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table') 89 })
Through events Bubble, let the event bound by the child element bubble up to the parent element (or ancestor element) and then process it.
<!DOCTYPE html> <html> <style> </style> <head> <meta charset="UTF-8"> <title>演示文档</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <style type="text/css"> input{width: 100px;height: 30px;} div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px} td{width: 50px;height: 20px;background: #ccc} </style> </style> </head> <body> <h3>jQuery事件对象</h3> <input id="btn1" type="button" value="事件绑定"><br> <div></div> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script type="text/javascript"> $(function(){ /* //使用事件委托动态绑定事件 $('#btn1').on('click',function(){ $("<div></div>").appendTo($('body')) }) // $('div').on('click',function(){ // $(this).css('background','orange') // }) $(document).on('click','div',function(){ $(this).css('background','orange') }) //移出事件委托 $(document).off('click','div') //如果不是动态创建的,可以直接绑定事件 $('<div></div>').appendTo($('body')) $('<div></div>').appendTo($('body')) $('<div></div>').appendTo($('body')) $('div').on('click',function(){ $(this).css('background','orange') }) //每一个td绑定一个事件 //不能动态的添加事件,效率低 $('td').on('click',function(){ alert('click_td') }) */ $('#btn1').click(function(){ $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table') }) //使用事件委托,只在table上绑定一次事件 //可以动态绑定事件 $('table').on('click','td',function(){ //$(this).css('background','orange') alert('click_td') }) }) </script> </body> </html>
Add events to dynamic elements
Events are only bound once, high efficiency
The above is the entire content of this article, I hope it will help everyone learn Helpful, please pay attention to the PHP Chinese website for more related content!
Related recommendations:
js moves any element to a specified location
Node.js uses superagent to simulate GET/POST Request
The above is the detailed content of How to use jquery event delegation. For more information, please follow other related articles on the PHP Chinese website!