title: How to bind event after ajax success in jQuery
body: <p>So here is my code:</p>
  
  <pre><code>$(document).ready( function() {
  $('#form').bind('change', function(){
      $.ajax({
      type: 'get',
      url: 'api.php',
      data: 'task=getdirs&amp;formname='+$('#form').attr('value'),
      dataType: "text",
      success: function (html){
          $('#chdir').html(html);
          $('#chdir select').bind('change', getDirs());
          }
      });
  });
  function getDirs(){
  }})
  </code></pre>
  
  <p><code>#form</code> here has a <code>&lt;select&gt;</code> element. The ajax call returns a piece of html with a new <code>&lt;select&gt;</code> element.<br>It works nice: in the <code>#chdir</code> div I get a new dropdown element. But the event inside the <code>success</code> part fires only once. Then this event does not work anymore at all.<br>What can I do to make the newly created <code>&lt;select&gt;</code> element work in the same way as the first?</p>