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

Question

我使用 Add New Item 按钮在 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);
    });

因此，当我单击 Add New Item 时，代码会生成 Row 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)事件处理程序一起工作(很好)，因为选择器用于检查 given 元素是否匹配或不，不是在一组元素中找到一个元素。

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

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