Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you need to attach events to elements that are likely to be added in the future (via Ajax) then you should always use event delegation. </p> <p>In simple terms it works by attaching an event to the parent element and then checking to see which child was clicked. It doesn't matter if child elements are added or removed.</p> <p>The correct way to use delegation in jQuery is with the .on() and .off() methods:</p> <pre><code>$("#dataTable tbody").on("click", "tr", function(event){ alert($(this).text()); }); </code></pre> <p>.live() and delegate() have been deprecated in favour of this new syntax. </p> <p>In fact, jQuery now just passes calls to those functions straight through to .on() and .off()</p> <pre><code>live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; } delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); } </code></pre> <p>Note: This is not only useful in Ajax applications. If you have a table with 1000 rows for example, it is far more efficent to use a delegated event on the table itself, rather than attaching to 100s of elements</p> <p><em>Some further reading:</em></p> <ul> <li><a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a></li> <li><a href="http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/" rel="nofollow">http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/</a></li> <li><a href="http://davidwalsh.name/event-delegate" rel="nofollow">http://davidwalsh.name/event-delegate</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload