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 `` 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 `

Accepted Answer

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);
});
```

How to bind event after ajax success in jQuery

Solution

Problem