title: jquery and jScrollPane and ajax
body: <p>I am building a site that has a fair bit of ajax on it and I seem to have hit a bit of a roadblock with getting jScrollPane to work for me.</p>
  
  <p>This might be hard to write down.</p>
  
  <p>I have a main page and at the base of it I have a div which I use to write all my overlays or 'lightbxes' to. e.g.</p>
  
  <pre><code>&lt;body&gt;
  &lt;a href="#" onclick="$('#popup').load('some-url.php');return false;"&gt;content etc&lt;/a&gt;
  &lt;div id="popup"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then in one such overlay (some-url.php) I have more content and then again I have some more divs which get populated using ajax.</p>
  
  <p>some-url.php</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="left"&gt;&lt;/div&gt;
  &lt;div id="right"&gt;&lt;/div&gt;
  &lt;script&gt;
  $('#left').load('another-url.php');
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now lets say div id="left" I want a jScrollPane scroller on it, but it's content loads via ajax.</p>
  
  <p>What I have tried is in 'another-url.php' loading up all my content and then trying to add the scrollpane.</p>
  
  <p>'another-url.php'</p>
  
  <pre><code>&lt;div class="wrapper&gt;
  // iterate through my DB and gets lots of content
  &lt;/div&gt;
  &lt;script&gt;
  $('#left').jScrollPane();
  &lt;/script&gt;
  </code></pre>
  
  <p>This fails, it says that $('#left').jScrollPane(); is not a function, so I tried putting it in the first overlay after I load up the div with content.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="left"&gt;&lt;/div&gt;
  &lt;div id="right"&gt;&lt;/div&gt;
  &lt;script&gt;
  $('#left').load('another-url.php');
  $('#left').jScrollPane();
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This doesn't fail the first time, though I get no scroller... but if I reload it again it fails again saying that $('#left').jScrollPane(); is not a function.</p>
  
  <p>So I looked at the docs and tried using the dynamic content example.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="left"&gt;&lt;/div&gt;
  &lt;div id="right"&gt;&lt;/div&gt;
  &lt;script&gt;
  var api = $('#left').jScrollPane().data('jsp');
  ('a.some-link').bind(
  'click',
  function(){
  api.getContentPane.load(
  'another-url.php',
  function(){
  api.reinitialise();
  }
  );
  }
  );
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But this time it again says that $('#left').jScrollPane(); is not a function.Also when I get one of these errors, the other jScrollPane on the site that is not ajax'd suddenly stops working also, until I reload the page so obviously jScrollPane is getting the shits with me somehow...</p>
  
  <p>Am hoping the guy that created the library might hang out here and respond.</p>