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

根据您提供的信息，我最好的猜测是您尝试以这种方式将on change事件附加到动态创建的输入：

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

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

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

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

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