How to bind event after ajax success in jQuery

Question

So here is my code:

$(document).ready( function() {
$('#form').bind('change', function(){
    $.ajax({
    type: 'get',
    url: 'api.php',
    data: 'task=getdirs&formname='+$('#form').attr('value'),
    dataType: "text",
    success: function (html){
        $('#chdir').html(html);
        $('#chdir select').bind('change', getDirs());
        }
    });
});
function getDirs(){
}})

#form here has a <select> element. The ajax call returns a piece of html with a new <select> element.
It works nice: in the #chdir div I get a new dropdown element. But the event inside the success part fires only once. Then this event does not work anymore at all.
What can I do to make the newly created <select> element work in the same way as the first?

Answer 1

You are invoking the getDirs function directly on the bind method call, you should only do it if this function returns another function, but I think that's not the case.

Change:

$('#chdir select').bind('change', getDirs());

To:

$('#chdir select').bind('change', getDirs);

Or if you are using jQuery 1.4+, you can bind the change event with the live method only once, and you will not need to re-bind the event after that:

$(document).ready(function () {
  $('#chdir select').live('change', getDirs);
});

Answer 2

Because this SO post came up in my google search, I thought I should mention that .live has been deprecated as of 1.9, and the recommended method is now .on

http://api.jquery.com/on/