在动态元素上应用事件

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)对委托事件处理程序有效（因为），因为选择器用于检查给定元素是否匹配，而不是在一组元素中找到元素。

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

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

Answer 2

尝试这样的事情

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

原因：您的行也是动态生成的，因此您无法通过$('#items_data tr')这样的选择器。