0

可能重复：
jQuery - 附加选择的 .change() 不起作用

每次值更改时，我都会尝试将表单提交到 php 文件...我有一个函数还允许用户添加另一个输入字段

在本示例中，我将默认字段（用户进入页面时随时可用的字段）称为“默认字段”，将任何添加的行称为“添加字段”。

因此，当用户单击默认字段并选择表单自动提交的值时会发生什么。但随后用户添加一行，然后为表单不会自动提交的添加字段选择一个值……用户有要实际单击提交，我尝试将 id 添加到添加的字段并使用该 id 通过 jquery 访问它，但它仍然无法正常工作.. 就像添加的行已附加，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>
4

1 回答 1

10

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

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

这是来自文档的引用：

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

[...]

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

于 2013-02-05T20:46:33.340 回答