Javascript 在动态元素上应用事件

我通过一个

添加新项

按钮，在4行之后生成表中的动态行

使用此代码：

$('#add_more').click(function(e){
        var TTR = $('#items_data tbody tr');
        var HTML = '<tr>\n\
                        <td>'+ (TTR.length + 1)+'</td>\n\
                        <td><input type="text" style="width:450px;" name="item_name[]" value="" /></td>\n\
                        <td><input type="text" style="width:50px;" name="item_qty[]" value="1" /></td>\n\
                        <td><input type="text" style="width:100px;" name="item_price[]" /></td>\n\
                        <td></td>\n\
                        <td>\n\
                            <a href="#add"><span class="fa fa-plus"></span></a>&nbsp;&nbsp;&nbsp;\n\
                            <a href="#del"><span class="fa fa-trash-o"></span></a>\n\
                        </td>\n\
                    </tr>';

        $(TTR.last()).after(HTML);
    });

但当我把它改为用于动态行时，它只适用于第一行

// This should works for dynamic rows as well but its 
// only work on the first row not the rest
$('#items_data').on('keydown', 'td:eq(3) input', keyHandler);

---

试试这样的

 $('#items_data tbody').on('keydown', 'tr td:eq(3) input', keyHandler);

---

原因：您的行也是动态生成的，因此您无法传递它，因为它具有类似于

$（“#items_data tr”）的选择器
我认为
：eq（3）
对委托事件处理程序不起作用，因为选择器用于检查给定元素是否匹配，而不是在一组元素中查找元素

：eq
通常用于将一组元素缩减为特定元素，例如获取集合中的第四个元素。但是在本例中，没有从中获取元素的集合，或者更确切地说，集合只包含一个元素，即触发事件的元素

使用另一个选择器，例如
input[name=“item_price[]”
或
td:n子项（4）input
:n子元素
有效，与
:eq
相反，因为它明确表示“如果元素是其父元素的第n个子元素，则匹配”。
$（“#items_data”）。on（'keydown'，'tr td:eq（3）input'，keydhandler）
。@Mr_Green我尝试过这个，但它不起作用。尝试使用
input[name=“item_price[]”]
作为选择器，而不是
td:eq（3）input
。我想，
：eq（3）
对于委托事件处理程序并不真正起作用，因为只有一个元素，而不是一组元素。@FelixKling你是对的，
：eq（3）
的问题现在起作用了，请添加一个答案以便对其他人有所帮助。这就是OP尝试的：
$（“#items_data”）。on（'keydown'，td:eq（3） 你为什么认为
#项目(u数据体
会工作而
#项目(u数据
不会工作？
 $('#items_data tbody').on('keydown', 'tr td:eq(3) input', keyHandler);