/ Published in: jQuery
Allow events to bubble up the DOM to overseeing handlers.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Event Delegation</title> </head> <body> <script type="text/javascript" src="_assets/behaviour/jquery-1.4.3.min.js"></script> <script type="text/javascript"> $(function() { //delegate $('table').delegate('tr','click', function() { $(this).toggleClass('selected'); }); //normal bind - slower performance as each tr has to have a bind event //$('tr').bind('click', function() { //$(this).toggleClass('selected'); //}); }); </script> <style type="text/css"> .selected {background:yellow;} </style> <table cellspacing="0"> <tbody> <tr> <td>1</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>2</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>3</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>4</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>5</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>6</td> <td>Lorem ipsum dolor sit amet</td> </tr> </tbody> </table> </body> </html>
URL: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery