javascript - 使用 jQuery 选择附加的链接按钮

Question

我在 td 中附加了一个带有两个链接按钮的 td 和一个名为 counter 的变量，在单击链接按钮时我希望 counter 变量是 递增或递减，但我无法弄清楚如何使用 jQuery 选择附加的链接按钮。下面是我的代码:-

var quantity = 1;

$("#order-table table").append('
<tr>
<td><button class="btn btn-link js-increment">+</button>' + quantity + 
'<button class="btn btn-link">-</button></td>
</tr>')

这是我尝试增加变量的函数

$(".js-increment").click(function () {
quantity++;
});

Answer 1

当您向 DOM 添加新元素时，您需要将事件监听器附加到 DOM 中已有的元素...例如 body 或您的 table .

这是一个 working fiddle使用您提供的代码和一些小的更改。

var quantity = 1;

$("#order-table table").append('<tr><td><button class = "btn btn-link btn-plus"> + </button><span class="value">' + quantity + '</span><button class = "btn btn-link btn-minus"> - </button></td></tr>');

$('body').on('click', '.btn-plus', function() {
    quantity++;
  $(this).next('.value').text(quantity);
});

$('body').on('click', '.btn-minus', function() {
    quantity--;
  $(this).prev('.value').text(quantity);
});