ホームページ > 記事 > ウェブフロントエンド > jqueryイベント委任の使い方
この記事では主にjqueryイベントデリゲーションの使い方を紹介します。これは、必要な友達に参考にしてもらいたいです
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
2. イベント委任の利点は何ですか?
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
4 とコードによって追加された要素の違いは何ですか。要素は動的に追加されますか?
73 //如果不是动态创建的,可以直接绑定事件 74 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 75 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 76 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 77 $('p').on('click',function(){ 78 $(this).css('background','orange') 79 })
5 イベント委任の使用シナリオは何ですか?
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
6. テーブルに行と列を動的に追加するにはどうすればよいですか?
87 $('#btn1').click(function(){ 88 $('a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5').appendTo('table') 89 })
2. jqueryイベント委任の使い方
2. コード
<!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>
以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。
関連する推奨事項:
js は、任意の要素を指定された位置に移動しますNode.js は、スーパーエージェントを使用して GET/POST リクエストをシミュレートします以上がjqueryイベント委任の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。