Recursive jQuery function to amend select option values

I have a form that I am trying to alter with jQuery. Basically, my form has two elements and I need to change the value of the first option in each of them. However, there is an "add more" option that uses AJAX to dynamically generate another element that also needs changed. This add more button can be clicked an unlimited amount of times.

Right now I have this:

$(document).ready(function(){
  $("#myname-0-field option:firs开发者_开发技巧t").val("None");
  $("#myname-1-field option:first").val("None");
});

This works fine, but once the "add more" button is clicked, I have more elements called "#myname-2-field", "#myname-3-field", "#myname-4-field" etc. These obviously aren't affected by adding another line into my jQuery as the document has already loaded when they are added.

So the real question is, can someone point me in the right direction of writing a function that can react when the new element is added and change it. If possible, I'm also looking for the function to be aware and look for "#myname-X-field option:first" for tidyness.

---

use live() function

Then using each function set value

---

From the jQuery API look live function

Maybe you could add class to your element, so that finding particular element would be easier and it would not add event to other similar elements.

In the example I have a Li with class

$('li.myClass').live('click', function() {
    $(this).val(); // this is the getter for clicked value
    $(this).val("some_value_here"); // this is the setter for clicked value
});

Now you can add more elements (that has myClass class) and it will have a click event.

Btw. if you know that all elements are inside some container (div for example) then you can write more efficient jQuery using delegate.

$('#container_id').delegate('li.myClass', 'click', function () {
});

This is more efficient because it looks your new elements only under "containter" not from the whole DOM structure.