Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your particular conversion to <code>.on()</code> didn't work properly because you were using the static form of <code>.on()</code> instead of the dynamic form of <code>.on()</code>. Instead of the static form:</p> <pre><code>$('.alert-link').on("click", function(){ </code></pre> <p>you need to use the dynamic form like this:</p> <pre><code>$(someStaticParentObject).on("click", '.alert-link', function(){ </code></pre> <p>This will bind the event handler to <code>someStaticParentObject</code> and then use delegated event handling for any child events that originate on an item that matches the selector <code>'.alert-link'</code>. Your version was immediately binding to whatever <code>'.alert-link'</code> items existed at the time you installed the event handler (static binding) and was not using delegated event handling to handle events from objects that aren't yet created.</p> <p>See these previous answers for a good explanation of <code>.live()</code> vs. <code>.on()</code> and why <code>.live()</code> can lead to performance issues in some cases:</p> <p><a href="https://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409#9814409">Does jQuery.on() work for elements that are added after the event handler is created?</a></p> <p><a href="https://stackoverflow.com/questions/8541825/how-does-jquerys-new-on-method-compare-to-the-live-method-in-performance/8541838#8541838">How does jQuery&#39;s new on() method compare to the live() method in performance?</a></p> <p><a href="https://stackoverflow.com/questions/9113783/whats-the-difference-between-jquery-bind-and-jquery-on/9113835#9113835">What&#39;s the difference between jQuery.bind() and jQuery.on()?</a></p> <p><a href="https://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376">jQuery .live() vs .on() method for adding a click event after loading dynamic html</a></p> <p><a href="https://stackoverflow.com/questions/9711118/why-not-take-javascript-event-delegation-to-the-extreme/9711252#9711252">Why not take Javascript event delegation to the extreme?</a></p> <p>In a nutshell:</p> <pre><code>$(".item").live('click', fn); </code></pre> <p>is functionality equivalent to:</p> <pre><code>$(document).on('click', '.item', fn); </code></pre> <p>The two main drawbacks of <code>.live()</code> are:</p> <ol> <li>It evaluates the selector <code>".item"</code> immediately which is purely wasted cycles because the result isn't used at all.</li> <li><p><code>.live()</code> is hardwired to the document object. It uses delegated event handling to be able to handle objects that come and go, but all <code>.live()</code> event handlers are assigned to the document object. If you have a lot of them, it can be a big performance bottleneck because every event that bubbles up to the document has to be evaluated against the selectors of all <code>.live()</code> event handlers. <code>.on()</code> on the other hand can be bound not only to the document object, but also to an ancestor that is much closer to the actual origin of the events and when there are lots of delegated event handlers, it can be a LOT more efficient to find the events closer so that only the events that are close to the object are processed through the <code>.on()</code> selectors, thus improving performance. For example, the above handlers could be done like this:</p> <pre><code>$("#container").on('click', '.item', fn); </code></pre></li> </ol> <p>where <code>#container</code> is a parent of the dynamic <code>.item</code> objects.</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. 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.
    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