为什么val（）函数不能用于后来呈现的HTML？

Question

因此，我用javascript呈现了一个add minus按钮，因为我需要数据库中的数据，如果我不用javascript呈现它，它可以工作，但它不工作。

HTML：

<div id="cart">
  <div class="row">

  </div>  
</div>

JS（渲染）：

var output = [];
var food_template = [];
//res is the data got from database
for(var f in res) {
  id = res[f]["id"];
  name = res[f]["name"];
  description = res[f]["description"];
  price = res[f]["price"];
  food_template = [
    '<div class="col-6">',
    '    <div class="single_food_item media">',
    '        <div class="media-body", style="margin-right:10px; margin-top: 20px; height: 200px">',
    `            <h3>${name}</h3>`,
    `            <p>${description}</p>`,
    `            <h5>$${price}</h5>`,
    //add minus button starts
    '            <div class="input-group" style="width:50%">',
    '                <span class="input-group-btn">',
    '                    <button class="btn btn-danger btn-minus" type="button">-</button>',
    '                </span>',
    '                <input type="text" class="form-control no-padding add-color text-center height-25" maxlength="3" value="0">',
    '                <span class="input-group-btn">',
    '                    <button class="btn btn-success btn-plus" type="button">+</button>',
    '                </span>',
    '            </div>',
    //add minus button ends
    '        </div>',
    '    </div>',
    '</div>'
  ];
  output.push(food_template.join("\n"));
}
("#cart .row").html(output.join("\n"));

JS（加减按钮）：

$('#cart .row').delegate('.btn-minus', 'click', function(){
  $(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) - 1);
});

$('#cart .row').delegate('.btn-minus', 'click', function(){
  $(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) + 1)
});

（调用所有函数）

我的测试使我认为问题可能是val（）函数没有改变输入HTML的值，因为如果我使用console.log来显示它，它可以工作，但它不会在web上更新

Answer 1

我认为您有加号和减号事件处理程序附加在减号按钮上，所以当您单击它时，加号处理程序增加值，减号处理程序减少值，因此您没有看到关于输入值的变化