jQueryで添付されたリンクボタンを選択する

Question

td内に2つのリンクボタンと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>') 

ここでは、あなたがこのようなspanであなたの量をラップすることができ

$(".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

変数をインクリメントしようとしている私の関数です。また、ボタンに別のクラスを追加します。

$("#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 3

$('.btn-link')を使用してボタンを選択できました。別々に各ボタンを選択しようとしていますか？

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