jQueryはループ内に追加します

Question

私は私の頭の周りを包むように見えない特定の問題があります。私はreddit APIを使用してデータを取得しています。

だから基本的に私は#triggerを使用して答えを見せたかった

$(function() { 

    console.log("is it loading") 

    axios.get('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot') 
    .then(function(data){ 
    var q; 
    for(var i = 2; i < data.data.data.children.length; i++){ 
     q = data.data.data.children[i]; 
     $('#main').append('<h4>' + q.data.title + '</h4><br><button class="btn btn-success trigger">answer</button><div class="answer">'+ q.data.selftext +'</div>') 


     $('.answer').hide() 


     $('.trigger').click(function(e){ 
     e.preventDefault() 
     console.log("clicked", [i]); 
     $('.answer').show() 
     }) 
    } 
    }).catch(function(error){ 
    console.log("error occured") 
    }) 
}) 

を更新しました。しかし、#triggerボタンをクリックすると問題が発生します。配列には26という実際のカウントではなく、27のカウントが表示されます。#triggerボタンをクリックすると何とか1カウントが追加されます。今すぐボタンをクリックして回答を表示することはできません。どんな助けも大いにありがとうございます

Answer 1

これを試してみてください。ルックアップはしていません。要素を作成/使用しているときに要素を使用/バインドしています。より良いアプローチは、コンテキスト参照を使用して委譲されたリスナーを使用することです。

axios.get('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot') 
     .then(function(data) { 
      var $main = $('#main'); 

      //use slice so you can use forEach instead of rolling your own for loop 
      data.data.data.children.slice(2).forEach(function(child){ 
       //instead of looking up trigger, create it so you can do whatever you want with it 
       var $trigger = $('<button class="btn btn-success">answer</button>'); 
       //same with answer 
       var $answer = $('<div class="answer">'+ child.data.selftext +'</div>'); 

       $answer.hide(); 

       $trigger.on('click', function(e){ 
        e.preventDefault(); 
        $answer.show(); 
       }); 

       $main 
        .append('<h4>'+ child.data.title +'</h4><br>') 
        .append($trigger) 
        .append($answer); 
      }); 
     }).catch(function(error) { 
      console.log("error occured") 
     }); 
    });