Question

我正在开展一个项目。并且无法看到让这个工作。我打电话给我的虚拟localhost并从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是作为按钮的另一个属性创建的。

要解决此问题，您需要正确填写引号（＆＃34;＆＃34;）。喜欢这个

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

如何通过点击按钮获取Json的价值

2 个答案: