javascript - jQuery 输入更改不起作用

Question

我正在尝试制作类似购物车的东西，但只是带有订单表格。 我正在使用this pattern触发输入更改，但在我的情况下不起作用。

这是我首先拥有的。

<div class="ingrid__table-row">
   <div class="ingrid__table-data ingrid__table-item">Lemon</div>
   <div class="ingrid__table-data ingrid__table-weight">15g</div>
   <div class="ingrid__table-data ingrid__table-price">10</div>
</div>

使用 jQuery，单击后，我会从 ingrid__table-data 获取数据，并将其添加到 .order__container 中的适当输入中。

然后，在同一次单击中，会附加一个数字输入，以便选择所选产品的数量。

$('.order__container').append(`<input class="bul-order-info__input bul-order-info__qnt" type="number" name="Quantity" min="1" value="1">`)

它会出现在网页上的订单表格中。

我需要检测“数字类型输入”的值变化并触发其他事件。 但是没有检测到输入更改，尽管如果我在 HTML 文档中手动创建相同的输入元素，这些更改会被完美地检测到，如所示 here

我怎样才能实现这种行为？

Answer 1

根据您提供的信息，我的最佳猜测是您正在尝试以这种方式将更改事件附加到动态创建的输入:

$('.bul-order-info__input').change( function () {...} );

但是在您之前的代码中，您不会将这些更改应用于任何输入，因为在创建事件处理程序时它们都不存在，因此您必须将事件绑定(bind)到现有元素，如下所示:

$(document).on('change', '.bul-order-info__input', function() {...});

该元素不必总是文档，但我倾向于使用它，因为它是唯一始终存在的元素。然而，这样的事情也是有效的:

$('.order__container').on('change', '.bul-order-info__input', function() {...});