在动态元素上应用事件

debugcn 发表于 Dev

jogesh_pi

我用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);

费利克斯·克林（Felix Kling）

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

:eq通常用于将一组元素简化为特定元素，例如获取一组元素中的第四个元素。但是在这种情况下，没有从中获取元素的集合，或者说集合仅包含一个元素（触发事件的元素）。

使用其他选择器，例如input[name="item_price[]"]或td:nth-child(4) input。与之:nth-child相对:eq，之所以起作用，是因为它显式地表示“如果元素是其父元素的第n个子元素，则匹配”。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。