javascript - 如何将 javascript 事件处理程序附加到在 javascript 中创建的这些元素

Question

背景
从长远来看，我不是 HitTest 门的 jQuery 家伙，我试图去掉下面代码中的重复工作。虽然性能开销可能很小且可以忽略不计 - 这更像是不想编写多次执行相同操作的蹩脚代码的情况。
基本上我有一个简单的发票表格，用户也可以添加多个项目。
表单最初有 4 个输入:项目名称、项目价格、项目数量和总计

只要价格或数量字段触发更改事件

，就会计算总数。

问题 - 部分解决(见更新)
用户可以为第二个(或第三个、第四个、第五个等)项目添加额外的输入行

将事件处理程序附加到 price 的现有 javascript和 quantity fields 已经运行，因此不会将监听器附加到新添加的输入行。

解决方案 ？
目前，我已经解决了一些可怕的问题，在添加新的输入行后，我将事件监听器重新附加到所有输入字段。
我想这很酷，如果您对自己的工作质量不感到自豪，但如果发票是 20 件元素，我真的需要在已经连接了听众的 19 行上添加第 20 行循环，再次附加它们并然后将监听器附加到新行。我希望不会。
我已经设法针对新添加的输入行来删除克隆输入中的值 - 所以我想只针对新的输入字段并附加监听器 - 但我得到了正确的二和八，因为理想情况下我想这样做

克隆输入行

清除值

附上听众

添加到 DOM

我目前正在做的感觉很怪诞的是

克隆行

将行添加到 DOM

选择新添加的行并删除值

选择新添加的 Quantity 字段并附加一个监听器

选择新添加的价格字段并附加一个监听器

选择新添加的总计字段并附加一个监听器(以更新发票总计)

下面的代码，让你一笑置之，然后希望同情我，并提供一个更简洁的解决方案，或者至少是关于如何编写我自己的更好版本的建议。

/** Add additional item lines */
$('#add-item').click(function(e){
    e.preventDefault();
    /** clone first line and insert it */
    $('.input-row:first').clone().insertAfter('.input-row:last');
    /** clear the newly inserted inputs of values */
    $(':input', '.input-row:last').val("");
    /** ensure all item price and qty inputs have events attached to their change value */
    $('input[name="item_qty[]"],input[name="item_price[]"]').on("change",function () {
        var $container = $(this).closest('.form-group');
        qty = Number($('input[name="item_qty[]"]',$container).val())||0,
        price = Number($('input[name="item_price[]"]',$container).val())||0;
        $('input[name="item_total[]"]',$container).val(qty * price);
        $('input[name="item_total[]"]',$container).change();
    });
    /** Sum inputs for invoice total */
    $('input[name="item_total[]"').change(function() {
        var total = 0;
        $.each($("[name='item_total[]']"), function(index, value) {
            total += parseFloat($(this).val());
        });
        $("#total").val(total);
    });
});

更新
因此，通过利用事件委托(delegate)，事件在 dom 中传播(或冒泡)——谢谢大家!每当新父 div 中的输入之一发生更改时，我都会重新计算发票总额

<div id="invoice-items">
    <input name /> <input quantity /> <input price /> <input total />
    <input name /> <input quantity /> <input price /> <input total />
    <input name /> <input quantity /> <input price /> <input total />
    ...
</div>

/** if any input rows change update the invoice total */
$('#invoice-items').on('change', 'input', function(event){
    var total = 0;
    $.each($("[name='item_total[]']"), function(index, value) {
        total += parseFloat($(this).val());
    });
    $("#total").val(total);
});

我剩下的问题...
我仍然纠结于如何更新 <input total />以反射(reflect)对该特定行的更改。我猜在我的新 jQuery 代码片段中的某个地方我需要确定哪个字段更改并更新同一行上的总数？
这就是我当前将更改监听器附加到输入的第一行/现有行以填充总行的方式

/** calculate item total */
  $('input[name="item_qty[]"],input[name="item_price[]"]').on("change", function () {
    var $container = $(this).closest('.form-group');
    qty = Number($('input[name="item_qty[]"]',$container).val())||0,
    price = Number($('input[name="item_price[]"]',$container).val())||0;

    $('input[name="item_total[]"]',$container).val(qty * price);
    $('input[name="item_total[]"]',$container).change();
  });

我想我仍然需要一些方法来在添加一行之后运行此代码，或者遵循更清晰的事件委托(delegate)路线 - 某种方式只针对 item_total[]对于更改事件发生的行？也许我可以捕获触发更改事件的元素的特定索引 - 并且只更新 item_total[]在那个指数？
只是在这里大声思考，我想如果我捕获事件并遍历所有输入，直到找到与触发事件的元素匹配的元素，然后我可以获取名称为 invoice_total[] 的下一个表单输入并更新它？ - 我们去检查一下。
更新
所以我可以捕捉到这个事件 - 快乐的日子 :)

event.currentTarget.attributes.name.nodeValue == 'item_qty[]'

所以我仍然不知道 item_qty[] 中的哪一个我更新了元素，因此我不知道是哪个 item_total[]要更新的元素。
有什么建议吗？!？

Answer 1

你想采取包装元素

<div>
    <input />
    <input />
</div>

$('div').on('change', 'input', function(){
    // your magic here
});

这将适用于现在在那里的两个人，以及新元素。为什么？简单的说:
您将事件绑定(bind)到存在的元素。您制作一个新的，更改它，但从不将事件绑定(bind)到新元素。事件在树上冒泡，没有什么可以捕获它。

我的代码不绑定(bind)到元素本身，你告诉它在 input 上监听它的变化.新元素进来，你改变它们，什么都没有发生，所以它在树上冒泡。
这是最大的不同:这一次我们告诉现有元素现在做点什么。