jQueryのgetJSONと私は値を持つJSONファイルと表示ボタンからダウンロードデータだボタン

Question

から値を取得する：

 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に私をクリックすると、私は、このボタンから値を取得したいと思います。だから私は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); 



       }); 
      }); 

にdoneを追加しかし、それは働いていません。 Ulubioneボタンをクリックするといつも入るconsole log value = 0

Answer 1

przepisyDostは

for (var x in przepisyDost) { 

で定義されていないよう？

for (var x in data.przepisyDost) { 

重複を試してみてくださいid年代はforループ内

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

でdocumentに追加されます。 document

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

にhtml文字列を追加するときidためclassを代入してみてくださいあなたは.done()

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

Answer 2

同じIDのボタンを複数追加しているようです。 html要素のidは一意でなければなりません。

Answer 3

の外に、私はダミーJSONを作成し、実行してきた、.ulubioneBtn要素にclickイベントをアタッチするイベントの委任を使用することができます単一の変更で同じJS。 ボタンを取得する代わりにonclickハンドラで、私は$（event.target）を使用しています。

これは問題なく動作しています。

第一の目的は、任意のid値を持たないようにフィドル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); 
}); 

はそう見つけてください。 サーバーから返されたJSON応答を確認してください。

これはあなたの解決に役立ちます。