Question

附加后，输入对jQuery是不可见的。这是3输入

<input class="bul-order-info__input bul-order-info__price" type="text" name="price" value="500" readonly>  
<input class="bul-order-info__input bul-order-info__qnt" type="number" name="quantity" min="1" value="1">   
<input class="bul-order-info__input bul-order-info__total" type="text" name="totalPrice" value="" readonly>

使用此代码

let $output = $("#output-value");  
let $price = $(".bul-order-info__price");  

$(document).on('change', ".bul-order-info__qnt", function () {
let value = parseFloat($(this).val());
$output.val(value * $price.val());
});

如果我手动创建的html中有这些输入，我可以将输入值相乘并将结果添加到总价格输入中。

但是我需要在click事件之后出现这些输入，所以我追加它们。之后，它们变得对jQuery不可见，因此没有任何作用。

如何让这些输入显示在页面上，表单中，然后操纵它们的值？

Answer 1

Jquery无法直接找到动态生成的元素。您可以使用未动态附加的父级访问它们。

$(document).on('change', "body .bul-order-info__qnt", function () {
    let value = parseFloat($(this).val());
    $output.val(value * $price.val());
});

Answer 2

在将值分配给显示乘法结果的输入字段时，您只犯了一个错误

＆＃13;

npm update

＆＃13;

let $output = $("#output-value");  
let $price = $(".bul-order-info__price");  

$(document).on('change', ".bul-order-info__qnt", function () {
let value = parseFloat($(this).val());
let tot=value * $price.val();
$(".bul-order-info__total").val(tot);
});

＆＃13;

乘以输入值

2 个答案: