Jquery .change() function not working with dynamically populated SELECT list

I have a select field that is dynamically populated with an ajax call that simply returns all the HTML select options. Here is the part of the PHP that just echo’s the select tags and dynamically fills out each option/value.

echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";
foreach ($start as $value) {
  echo "<option value='".$value."'>".$value."</option>";
echo "</select>";

After this list is populated, I’m trying to call a change event, so that whenever the default option is changed in the SELECT list or in a text field with the same class, it disables a radio button set in another part of the form. (You can see the initial question I asked to get this part of the functionality working here)

  $(this).parents('tr').find('input:radio').attr('disabled', false);


For some reason, even though I give the select field the proper class name (affector), when I select different options in the field, the other parts of the form do not disable. The static text field with the same class works fine. I’m stumped.


A more up to date answer..

Since the elements are dynamically populated, you are looking for event delegation.

Don’t use .live()/.bind()/.delegate(), though. You should use .on().

According to the jQuery API docs:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on().

Therefore you would use something like this:

$(document).on('change', 'select', function (e) {
  /* ... */