title: function event depending on appended div with class
body: <p>I have following problem. I'm appending a div with class "scrolling" for a javascript customized scrollbar, and I'm appending the div dynamically. After that, I set up the scrollbar.</p>
  
  <p>The problem is that it does not work with a div which was appended. When I'm trying it with a div which is hardcoded to the document everything works fine.</p>
  
  <pre><code>function appenddiv() {
      $('#container').append('&lt;div id="test" class="scrolling"&gt; Lorem Ipsum ...... &lt;/div&gt;');
  
      $('.scrolling').scrollbar();
  }
  </code></pre>
  
  <p>I also tried </p>
  
  <pre><code>function appenddiv() {
      $('#container').append('&lt;div id="test"&gt; Lorem Impsum .....&lt;/div&gt;');
      $('#test').addClass('scrolling');
  
      $('.scrolling').scrollbar();
  }
  </code></pre>
  
  <p>I tried it with just a button</p>
  
  <pre><code>&lt;a href="#" onClick="appenddiv"&gt;Click here&lt;/a&gt;
  </code></pre>
  
  <p>the only thing which works is:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div id="test" class="scrolling"&gt; Lorem Ipsum ..... &lt;/div&gt;
  
     &lt;script type="text/javascript"&gt;
       $(document).ready(function() {
           $('.scrolling').scrollbar(); //this is not fired in the examples above!
          });
  </code></pre>
  
  <p>As I said, it only works when the div test with class scrollbar is already in the body. The function scrollbar is a jquery-customized scrollbar script, located <a href="https://github.com/thomd/jquery-scroll/" rel="nofollow">here</a></p>