用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