title: slideToggle not working on dynamically generated divs
body: <p>I want to add a lot of <p> with hidden divs that slideToggle. I don't want to write such  a long code that's why I'm trying this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="jquery-1.5.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" &gt;
  
  
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  $(document).ready(function() {
      //this function does not work when I append the p and div
      $(".flip").click(function() {
          $(this).next().slideToggle("slow");
  
      });
      var p = $('&lt;p&gt;&lt;/p&gt;').addClass('flip').text('click here');
      var div = $('&lt;div&gt;&lt;/div&gt;').addClass('panel').text('hellow world');
      p.append(div);
      $(p).bind('click', function() {
  
       // alert($(this).text()); //this alert works when i put it as a p.bind
         $(this).next().slideToggle("slow"); //this does not work!! but the previous alert does work....
       });
      $("div#elements").append(p);
  
  
  });
  &lt;/script&gt;
  
  
  &lt;style type="text/css"&gt; 
  div.panel,p.flip
  {
      margin:0px;
      padding:5px;
      text-align:center;
      background:#e5eecc;
      border:solid 1px #c3c3c3;
  }
  div.panel
  {
      height:120px;
      display:none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body &gt;
  
  &lt;div id="elements" &gt;
  
  
   &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Interesting thing is that the$(flip) function DOES not work with the generated p and div...I then added the function as a (p).bind, and tried it with an alert and it DOES work, but when I want to slideToggle, it doesn't work, does anybody know why?</p>