Question

我有一个带有按钮的表，单击时会向表中添加5行单元格。我想将事件绑定到表的第5列中的单元格。所有这些单元格都被命名为“Count_”，后跟行号。因此，第0行中的单元格为：

<td name="CountCell_0">
   <input type="text" name="Count_0">
</td>

我正在尝试使用名称Count_X更新输入（其中X是行号）。绑定适用于最初存在于页面上的单元格。但是，事件不会触发随按钮添加的单元格。

以下是动态添加的单元格示例：

<td>
  <input type="text" name="Count_348">
</td>

这是我的Jquery事件：

            $(document).ready(
            function() {   
                $(document).on('change','[name^="Count_"]',function() {
                    console.log('here'); //not triggering on dynamic cell
                    var cell = $(this).attr('name');
                    var idx = cell.split('_')[1];
                    var amount = $(this).val() * $('[name="AvgCost_' + idx + '"]').html();
                    $('#ExtendedCostCell_' + idx).html(amount.toFixed(2));
                });

           }
        );

Answer 1

我认为问题出在这里[name ^ =“Count_”]'你需要一个选择器所以更改为此输入[name ^ =“Count_”]'并且不执行anonimous函数

        $(document).ready(
        (function() {   
            $(document).on('change','input[name^="Count_"]',function() {
                console.log('here'); //not triggering on dynamic cell
                var cell = $(this).attr('name');
                var idx = cell.split('_')[1];
                var amount = $(this).val() * $('[name="AvgCost_' + idx + '"]').html();
                $('#ExtendedCostCell_' + idx).html(amount.toFixed(2));
            });

       }());
    );

Answer 2

我已将该功能移到文档外部，现在它在动态行上触发。

将Jquery事件绑定到动态添加到表的表行

2 个答案: