Question

可能重复：
jQuery - .change() for appended select doesn’t work

我试图在每次值更改时将表单提交到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...
});

以下是the docs的引用：

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

[...]

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

change（）事件不适用于附加输入

1 个答案: