Question

我在td中附加了一个带有两个链接按钮的td和一个名为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

您可以使用span这样包装数量。另外，为按钮添加不同的类：

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

在document.ready中添加以下点击事件：

$(document).ready(function(){
  $("body").on('click', '#order-table table .btn-increment', function(){
      $quantity = $(this).closest("td").find("span");
      $quantity.text(parseInt($quantity.text()) + 1);
  });

  $("body").on('click', '#order-table table .btn-decrement', function(){
      $quantity = $(this).closest("td").find("span");
      $quantity.text(parseInt($quantity.text()) - 1);
  });
});

Answer 2

当您向DOM添加新元素时，您需要将事件侦听器附加到DOM中已经存在的元素... //push method to add numbers to the stack public void push(int value) { if(!isEmpty()){ top.setData(value); size++; } else { top = new Node(value); size++; } }或body。

这是一个working fiddle，其中包含您提供的代码和一些小的更改。

table

Answer 3

我可以使用$('.btn-link')选择按钮。您是否尝试单独选择每个按钮？

Codepen：https://codepen.io/anon/pen/JrERGJ?editors=1111

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

3 个答案: