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