title: Preventing jQuery from cache busting resources loaded during AJAX callbacks that use the `html(...)` function
body: <p>Using jQuery 1.7.1, I am loading some HTML fragments via AJAX that are injected into the DOM via the <code>html()</code> method. </p>
  
  <p>The HTML content itself cannot be cached, but it may load some JavaScript resources that can be cached.</p>
  
  <p>What I've found is when I disable caching in the <code>$.ajax</code> call, this adds the cache busting parameter to all HTTP requests made from jQuery as the HTML is injected into the DOM.  This prevents the browser from caching the otherwise static JavaScript resources. </p>
  
  <p>My current solution isn't very graceful and seems racy at that.  I basically flip the global cache option after the AJAX call has succeeded, but before the HTML is processed.</p>
  
  <pre><code>var $dynamic = $('#dynamic');
  $.ajax({
            url: href,
            cache: false,
            dataType: 'html',
            success: function(data, textStatus, jqXHR) {
                // This is hokey, but needed to allow browser to cache
                // resources loaded by the fragment
                $.ajaxSetup({cache:true});
                $dynamic.empty().html(data);
                $.ajaxSetup({});
            }
  });
  </code></pre>
  
  <p>Can anyone think of a better way to do this?  Should I avoid using the <code>&lt;script rel=...&gt;</code> tag in the AJAX-loaded fragment and use something else to get the JavaScript loaded?</p>
  
  <p>Side note, there seem to be some related SO questions, but one of them has an accepted answer that's not an answer and another claims the behavior was changed in jQuery 1.4, so maybe this is a regression of some sort.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>To elaborate, the above jQuery snippet is applied to a <code>div</code> element.  Trimmed down to something like this:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
        // ... load jquery ... 
  
        &lt;script type="text/javascript"&gt;
           $(document).ready(function() {
              var $dynamic = $('#dynamic');
              $('a').click(function(e) {
                  e.preventDefault();
  
                  var $a = $(this);
                  var href = $a.attr('href');
                  $.ajax({
                      url: href,
                      cache: false,
                      dataType: 'html',
                      success: function(data, textStatus, jqXHR) {
                          $.ajaxSetup({cache:true});
                          $dynamic.empty().html(data);
                          $.ajaxSetup({});
                      } 
                  });
              });
           });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;a href="/api/dynamic-content/"&gt;Click Here&lt;/a&gt;
        &lt;div id="dynamic"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When the event occurs, in this case a click, the handler invokes <code>$.ajax</code> to load a text/html fragment into the <code>#dynamic</code> div element.  Here's an example of what such a fragment could look like:</p>
  
  <pre><code>&lt;p&gt;Some dynamic content here...&lt;/p&gt;
  &lt;script type="text/javascript" src="/static/some.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>So the <code>success</code> handler of the AJAX call loads the text/html snippet and injects it into the DOM via the jQuery <code>html(...)</code> function.  As you can see, the text/html fragment may also have a link to an external script.  </p>
  
  <p>The documentation for <code>html(...)</code> indicates that this usage pattern is just fine and that the script resources will be loaded and executed as one would expect.  </p>
  
  <p>The problem I'm having is that the content of the text/html fragment is not cacheable and must be invoked with the cache-busting mechanism.  However, the JavaScript resource that it needs to load <em>is</em> static and cacheable, but jQuery applies cache-busting when loading the JS resource because the initial AJAX call was made with <code>cache : false</code></p>
  
  <p>Broken down, here's the chain of events:</p>
  
  <ul>
  <li>Click handler invoked</li>
  <li>AJAX function performs <code>HTTP GET /api/dynamic-content/?_=1331829184164</code></li>
  <li>Success handler calls <code>$dynamic.empty().html(data);</code></li>
  <li><code>$dynamic.empty().html(...)</code> performs <code>HTTP GET /static/some.js?_=1331829184859</code></li>
  </ul>
  
  <p>I'm looking for a more elegant way to disable the cache-busting on the subsequent or 'inner' HTTP request that's triggered to load the JS resource when the text/html fragment gets injected into the DOM. </p>
  
  <p>In short, everything else is correct, I just want it to do <code>HTTP GET /static/some.js</code>, not <code>HTTP GET /static/some.js?_=1331829184859</code> on that final step.</p>