如何在單擊按鈕中從Json獲得價值

Question

我正在做一個項目。 並且看不到使它工作。 我打電話給我的虛擬本地主機，並從Json取回產品信息，然后將其放在按鈕中。 我具有按鈕的點擊功能，並將商品ID傳遞給我的ID。 但有些卻不顯示商品ID。 請看看有什么問題。 謝謝。

 function loadItem() {
    var contentRows = $("#prod-diplay");
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/items',
        success: function (data, status) {
            $.each(data, function (index, item) {
                var ID = item.id;
                var name = item.name;
                var price = item.price;
                var quantity = item.quantity;
            var row = '<div class="col-sm-6 col-md-4">';
                row += '<button type="button" class="btn btn-default" id="product"' + ID + '>';
                row += '<p id="id">' + ID + '</p>';
                row += '<p id="name">' + name + '</p>';
                row += '<p id="price"> Price: ' + price + '</p>';
                row += '<p id="quanity"> Quantity Left: ' + quantity + ' </p>';
                row += '</button>';
                row += '</div>'
                contentRows.append(row);
                $
                $('#product' + ID ).click(function(){// get this working. left off from here when start back up. 
                    $('#vending').val(item.id);
                });

            });


        },
        error: function () {
            $('#errorMessages')
                .append($('<li>')
                    .attr({
                        class: 'list-group-item list-group-item-danger'
                    })
                    .text('Error calling web service.  Please try again later.'));
        }

    });

}
    <div class="row">
    <div class="col-md-9" id="prod-diplay"></div>

   <div class="form-group">
   <label for="displayItem" class="col-sm-2 control-label">
   Item:
   </label>
   <div class="col-md-8">
   <input class="form-control" id="vending" placeholder="item no." required/>
   </div>
   </div>
  <button type="button" id="purchase" class="btn btn-default">Make Purchase</button>
  </div>

Answer 1

這里有一個額外的$

//Rest of the code
contentRows.append(row);
$ //<--- this one may be unwanted
$('#product' + ID ).click(function(){
$('#vending').val(item.id);

//Rest of the code

為了解決您的問題，您可以委派活動

$('body').on('click','#product'+ID ,function(){
  $('#vending').val(item.id);
})

Answer 2

問題是您將id分配給按鈕的方式。

'<button type="button" class="btn btn-default" id="product"' + ID + '>'

如果您檢查此按鈕，您將看到

<button type="button" class="btn btn-default" id="product" 1="">..</button>

檢查id，它是id="product" ，您的json中的ID將作為按鈕的另一個屬性被創建。

為了解決這個問題，您需要正確地加上引號（“”）。 像這樣

'<button type="button" class="btn btn-default" id="product' + ID + '">'