title: jQuery CSS not firing after Ajax load - can't use an on click event
body: <p>I've got a somewhat special situation where I need to load a background image dependent on data returning in a page that is loaded with Ajax.</p>
  
  <p>Obviously <code>$(document).ready</code> doesn't work here and the usual answer is to supply and .on click event handler, but in this situation there is no event to trigger, I'm basically trying to load a background image on page load.</p>
  
  <p>I'm grabbing the url of the image on the newly loaded page and setting it to a var, then trying to use that url for the background image of an element : </p>
  
  <p>This is how it looks : </p>
  
  <pre><code>&lt;script&gt;
  var bgImage = '&lt;?php echo TEMP_LOC . $track-&gt;track_id . '-bg.jpg'; ?&gt;';
  $(document).ready(function() {
    $('.single-t').css('background', 'url("' + bgImage + '")');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This works when the page is accessed directly but fails when loaded via ajax.</p>
  
  <p>The CSS has to be inline, I can't move this out to a separate CSS file as it relies on the page loaded to get the image URL.</p>
  
  <p>Any suggestions?</p>