

jQueryで以下のようなプログラムを作成しました。  
それぞれの"#no"+番号のdivをクリックした場合に、押したdivの番号のnameをアラートで表示させるプログラムです。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>クリックテスト</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css
    /bootstrap.min.css">
    </head>
    <body>
    
    <ul class="list-group" id="oomoto">
    </ul>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scri
    pt>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></sc
    ript>
    <script>
    var data =
    {
       "1535525652": {"name": "ほにゃらら"},
       "1535508625": {"name": "こにゃくら"}
    }
    for(var i in data){
    var h = '<li id="li'+i+'" class="list-group-item list-group-item-info">'
           +'<div id="no'+i+'">'+data[i].name+'</div>';
           + '</li>';
          $('#oomoto').append(h);
    $(document).on('click', "#no"+i, function(){
      alert($('#no'+i).text());
    });
    }
    </script>
    </body>
    </html>
    
[/code]

しかし、期待通りの動きをしてくれません。  
(1) JSONなので順番は関係ありませんが、表示が「こにゃくら」「ほにゃらら」の順番になっている。  
(2) 「こにゃくら」をクリックしても「ほにゃらら」をクリックしても、アラートに出るのはどちらも「ほにゃらら」

どうしても解決したいのは(2)ですが、(1)と相関関係がありそうですし。  
解決方法をご存知の方は、上記質問の片方でもいいのでご教授いただけると幸いです。


CC BY-SA 4.0
2018-09-05T16:15:40.980
48126
2018-09-05T16:58:29.590
8593
question
jquery
jQueryで追加したリストのidに対しどれをクリックしても一番最後の値が出力


クロージャー:

[code]

    function(){
      alert($('#no'+i).text());
    }
    
[/code]

の中で変数`i`がキャプチャーされてしまっているせいですね。(1)とは直接の関係はありません。

JavaScriptのクロージャー内で、その外側で定義されている変数を参照していると、クロージャーが作られた時の変数の値ではなく、変数そのものがクロージャーに結びつけて保持されます。そのせいで、そのクロージャーが実行される時の最新の`i`の値(今の例だと`{"name":
"ほにゃらら"}`のキーの`"1535525652"`)を使うことになります。

とりあえず、あなたの例の場合だと`this`を使うと解消できそうです。

該当の部分をこんな感じにして見て下さい。

[code]

    $(document).on('click', "#no"+i, function() {
        alert($(this).text());
    });
    
[/code]


CC BY-SA 4.0
2018-09-05T16:58:29.590
48128
2018-09-05T16:58:29.590
13972
48126
answer