Question

Possible Duplicate:
jQuery – .change() for appended select doesn’t work

I am trying to submit a form to a php file every time a value changes… I have a function that also allows the user to add another field of inputs

For the sake of this example I will refer to the default fields (the ones readily available when the user enters the page) as the ‘default field’ and any added rows as ‘added field’.

So what happens is when the user clicks on the default field and chooses a value the form automatically submits.. But then the user adds a row and then chooses a value for the added field the form does not automatically submit…the user has to actually click submit I tried adding an id to the added field and access it through jquery using that id but it still doesn’t work.. its like since the added rows are appended, jquery doesn’t recognize them… probably wrong but thats my best guess.

Here is my jquery:

$(function(){
     $("select").change(function(){
    $("#myform").submit();
     });
     $('#rowInput select').change(function(){
    $("#myform").submit();
     });

   });


$(function(){
        $("#add").click(function(){
            $("<tr id = 'rowInput'><td><select name = 'grades[]'><option value = '0'> SELECT </option><option value = 'A'>A</option><option value = 'AMINUS'>A-</option><option value = 'BPLUS'>B+ </option><option value = 'B'>B</option><option value = 'BMINUS'>B-</option><option value = 'CPLUS'>C+ </option><option value = 'C'>C</option><option value = 'CMINUS'>C-</option><option value = 'DPLUS'>D+ </option><option value = 'D'>D</option><option value = 'DMINUS'>D-</option><option value ='F'>F</option></select></td></tr>").fadeIn(200).appendTo("table");

        });

the html :

<form id = 'myform'>
   <table>
      <tr><td> 
        <select name = 'grades[]'>
             <option value = '0'> SELECT </option>
             <option value = 'A'>A</option>
             <option value = 'AMINUS'>A-</option>
             <option value = 'BPLUS'>B+ </option>
             <option value = 'B'>B</option>
             <option value = 'BMINUS'>B-</option>
             <option value = 'CPLUS'>C+ </option>
             <option value = 'C'>C</option>
             <option value = 'CMINUS'>C-</option>
             <option value = 'DPLUS'>D+ </option>
             <option value = 'D'>D</option>
             <option value = 'DMINUS'>D-</option>
             <option value ='F'>F</option>
       </select>
      </td>
     </tr>

   </table>
   <input type = 'submit' value = 'Submit'/>
</form>

Answer 1

Since the select elements are not available at the time you’re registering the event listener, you have to use event delegation:

$('#myform').on('change', 'select', function () {
    // run your code here...
});

---

Here’s a quote from the docs:

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

[…]

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.