2

I have the function below that fires when a radio button with an ID starting with "accounts_status_" is clicked.

I have another function which prepends a div creating the same radio buttons but with a different ID endings e.g. "accounts_status_1", "accounts_status_2", "accounts_status_3". Each one of the created radio buttons should fire the function below but it doesn't.

When I copy the HTML from firebug with the new radio buttons in it and save it to my page and run it that way, it works perfectly. Its like I have no control over the new buttons if they have been created on the fly. When I view source code it is not there either but it is in firebug.

I know it is not the function that adds new radio buttons as I can see them on the page and like I said when I copy it from firebug into my page it works fine.

Any help would be great.

Thanks

$('[id^="accounts_status_"]').change(function(){
    alert('Hello World!');
});
Jim
  • 227
  • 1
  • 3
  • 6
  • For simplicity and maintainability you might want to use a class for selecting elements, instead of the id, such as ``. Then the selector would simply be `$('input.accounts-status')`. – Matt Ball May 07 '11 at 21:46

1 Answers1

1

This will solve your problem:

$('[id^="accounts_status_"]').live('change', function(){
    alert('Hello World!');
});

.live() will bind events to elements that exist now and in the future, exactly what you need.

Hope this helps. Cheers

Edgar Villegas Alvarado
  • 18,204
  • 2
  • 42
  • 61