Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Just simply change:</p> <pre><code>$('#Col1').on('click', function() { </code></pre> <p>to </p> <pre><code>$(document).on('click', '#Col1', function(e) { </code></pre> <hr> <p>This is the old argument of direct vs delegated events. By using delegated events, you can ensure dynamically added elements maintain that event chain. In newer versions, such as seen in your example (using .on), you can delegate <code>.on</code> to either <em>a parent</em> of the element you want to target, or the document itself. Many feel targeting the <code>document</code> is bad practice as they claim <code>overhead</code> issues. Personally, I've been using this method since .on was introduced, have used it on at least 3 programs that see thousands of daily visitors and haven't had one complaint. I say, unless you're making a JS only video game, stick with <code>$(document)</code> as it it's easier to keep up with and allows you to continually "<a href="http://www.w3schools.com/jquery/jquery_chaining.asp" rel="nofollow">chain</a>" delegated events as needed without ever recalling <code>$(document)</code></p> <hr> <pre><code>$( selector ).live( events, data, handler ); // jQuery 1.3+ $( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+ $( document ).on( events, selector, data, handler ); // jQuery 1.7+ </code></pre> <ul> <li><a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a></li> <li><a href="http://api.jquery.com/delegate/" rel="nofollow">http://api.jquery.com/delegate/</a></li> <li><a href="http://api.jquery.com/live/" rel="nofollow">http://api.jquery.com/live/</a></li> </ul> <hr> <p><a href="http://jsfiddle.net/SpYk3/LqeHa/" rel="nofollow"><h1>Example</h1></a></p>
    singulars
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      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