javascript - 在动态元素上应用事件

Question

我使用添加新项目按钮在表中的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);
    });

因此，当我单击“添加新项目”时，代码会生成“第 5 行”，但问题是动态行上的事件处理程序不起作用。

// This is working with Rest rows Not Dynamic
$('#items_data tr').on('keydown', 'td:eq(3) input', keyHandler);

但是当我将其更改为适用于动态行时，它仅适用于单个第一行；

// 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);

Answer 1

我认为 :eq(3) 不适用于委托(delegate)事件处理程序，因为选择器用于检查给定的元素是否匹配或不，不是在一组元素中查找一个元素。

:eq 通常用于将一组元素减少为特定元素，例如获取集合中的第四个元素。但在这种情况下，没有可以从中获取元素的集合，或者更确切地说，该集合仅包含一个元素，即触发事件的元素。

使用其他选择器，例如 input[name="item_price[]"] 或 td:nth-child(4) input。 :nth-child 与 :eq 不同，因为它明确表示“如果该元素是其父元素的第 n 个子元素，则匹配”。