用jQuery选择附加链接按钮

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

当你添加新的元素到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); 
}); 

Answer 2

您可以用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>') 

添加以下click事件您的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 3

我能够使用$('.btn-link')来选择按钮。你想单独选择每个按钮吗？

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