jQuery附加循環內

Question

我有一個特別的問題，我似乎不包裹我的頭。我正在使用reddit api來獲取數據。

修訂

$(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顯示答案。但問題在於，當我點擊#trigger按鈕時，數組顯示了27個計數而不是實際的計數，它是26.當點擊#trigger按鈕時，它不知何故地添加了一個計數。現在我無法點擊按鈕來顯示答案。任何幫助將不勝感激

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") 
     }); 
    });