Question

我从JSON文件下载数据并显示带有值的按钮：

     function iterateOverPrzepisy(best) {
                $('#listaPrzepisow').html('');

                $.getJSON('przepisy.json', function(data) {

     for (var x in przepisyDost) {


     $('#listaPrzepisow').append(" <div data-role=\"collapsible\"><h2>" + przepisyDost[x].nazwa + "</h2>" +
                                "<ul data-role=\"listview\" data-theme=\"d\" data-divider-theme=\"d\">" +
                                "<li>" +
                                "<h3>Składniki: " + przepisyDost[x].skladniki + "</h3>" +
                                "<p class='ui-li-desc' style='white-space: pre-wrap; text-align: justify;'>" + przepisyDost[x].tresc + "</p>" +
                                "<button id='ulubioneBtn' value='" + przepisyDost[x].id + "'>Ulubione</button></li>" +
                                "</ul>" +
                                "</div>");
                        j++;
                    }

                })
}

当我点击button #ulubioneBtn时，我想从此按钮获取价值。我将done添加到getJSON

 }).done(function(data){

                $('button#ulubioneBtn').click(function (event) {

                    console.log("Ulubione: ");
                    event.preventDefault();

                    var id = $("button#ulubioneBtn").val();
                    console.log("Value: " + id);

                    //dodajemy do ulubionych
                    localStorage.setItem("ulubione"+id, id);



                });
            });

但它没有用。当我点击按钮Ulubione时，我总是进入console log value = 0

Answer 1

问题似乎是您添加了具有相同ID的多个按钮。 html元素的id应该是唯一的。

Answer 2

przepisyDost似乎没有在

中定义

for (var x in przepisyDost) {

？尝试

for (var x in data.przepisyDost) {

重复的id附加到<{p}的document

"<button id='ulubioneBtn' value='" + przepisyDost[x].id 
+ "'>Ulubione</button></li>" +

在for循环中。将class字符串附加到id

时，请尝试将html替换为document

"<button class='ulubioneBtn' value='" + data.przepisyDost[x].id 
+ "'>Ulubione</button></li>" +

您可以使用事件委派将click个事件附加到.ulubioneBtn以外的.done()元素

$("#listaPrzepisow").on("click", ".ulubioneBtn", function() {
  // do stuff
})

Answer 3

我创建了一个虚拟JSON并通过一次更改执行了相同的JS。在onclick处理程序而不是获取按钮我使用$（event.target）。

它工作正常。

请找小提琴https://jsfiddle.net/85sctcn9/

$('button#ulubioneBtn').click(function (event) {
  console.log("Ulubione: ");
  event.preventDefault();
  var id = $(event.target).val();
  console.log("Value: " + id);
  //dodajemy do ulubionych
  localStorage.setItem("ulubione"+id, id);
});

似乎第一个对象没有任何id值。请检查从服务器返回的JSON响应。

希望这有助于你解决问题。

jQuery getJSON并从按钮

3 个答案: