Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Including the same JS file in every load is a bit much. My suggestion would be to include the file in the main <code>head</code> the first time. Then make use of "delegation" for "dynamic" elements.</p> <p>For example, say I'm loading a view partial that will have link buttons similar to the initially loaded ones. thus I want them to maintain the same click function. Instead of typical assignment, such as:</p> <pre><code>$("a.bob").click(function(e) { e.preventDefault(); alert($(this).prop("href")); }); </code></pre> <p>I will use "delegation". jQuery gives us an easy way to do this that will assign the SAME EVENT|METHOD TO ALL ITEMS (PRESENT AND FUTURE[DYNAMIC]) HAVING MATCHING SELECTOR. The way to do this is like:</p> <pre><code>$(document).on("click", "a.bob", function(e) { e.preventDefault(); alert($(this).prop("href")); }); </code></pre> <p>The previous will tell ALL <code>a</code> tags having the class <code>bob</code> to not go any where and alert me of their link. This is regardless of when the <code>a</code> tag was added to the DOM.</p> <p><a href="http://jsfiddle.net/SpYk3/qg7NA/" rel="nofollow noreferrer"><h1>Example</h1></a></p> <p>One thing to keep in mind, <code>.on</code> is new as of jQuery version 1.72 (i think). Prior to that you would use <code>.live</code> or even <code>.delegate</code> instead.</p> <hr> <h3>On a Side-Note</h3> <p>Of course, delegation is only going to work with "events". If you need to use JavaScript for something like "layout" movement, then you're best to make a "callback" function to be used with the success of an ajax request. Again, you can place these callback methods in your one head file, but you will need to "call" them as needed in either $.ajax[success or complete].</p> <p>See <code>success</code> and <code>complete</code> <a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow noreferrer">http://api.jquery.com/jQuery.ajax/</a> to learn more about the basic callbacks of an ajax call. Also, as of version 1.7, you can maintain a <em>list</em> or jQuery Object of <code>callbacks</code> to be fired as needed. To get more information about callback lists, see <a href="http://api.jquery.com/category/callbacks-object/" rel="nofollow noreferrer">http://api.jquery.com/category/callbacks-object/</a></p> <p>If this is not enough information, please comment and I'll try to make anything you have a question on more clear.</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