change()事件不适用于附加输入

Question

可能重复:
附加select的jQuery - .change()不起作用

我试图在每次值更改时将表单提交到php文件...我有一个函数,也允许用户添加另一个输入字段

为了这个例子,我将引用默认字段(用户进入页面时随时可用的字段)作为"默认字段",并将任何添加的行称为"添加字段".

那么当用户点击默认字段并选择表单自动提交的值时会发生什么..然后用户添加一行,然后为表单不会自动提交的添加字段选择一个值...用户具有实际上点击提交我尝试添加一个ID到添加的字段,并通过jquery使用该ID访问它但它仍然无法工作..它喜欢,因为添加的行被追加,jquery不识别它们...可能是错误的但那是我最好的猜测.

这是我的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");

        });

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

由于在select您注册事件侦听器时元素不可用,因此您必须使用事件委派:

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

以下是文档的引用:

提供选择器时,事件处理程序称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).

[...]

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要.