按钮不能使用 jQuery 处理 AJAX 加载的内容？

Question

加载的每个部分都会有更多信息可供查看，我希望通过使用加载内容的按钮来完成此操作。由于它是一次加载的，我不确定如何加载一个特定于每个循环的按钮，而不是概括为一个。

我尝试了下面的代码，但它不起作用。在 AJAX 脚本之外使用按钮时 - 它可以正常工作，但同样仅适用于一个循环，而不适用于加载按钮的每个循环。

我正在使用 API 为女子世界杯申请。

    #more_info {
        display: none; /*style to hide the 'more info' as it is loaded*/
    }

<div id="matches"></div><!-- AJAX content is loaded here -->

<script>
$(document).ready(function() {
 $.getJSON("http://worldcup.sfg.io/matches", function(data){ 
     var group_data = '';
      $.each(data, function(key, value){
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<h5>'+value.stage_name+'</h5>';
            group_data += '</div>';   
            group_data += '</div>'; 
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td>'+value.location+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.venue+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team_country+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td><p>-</p></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team_country+'</td>';
            group_data += '</div>';
            group_data += '</div>';
            group_data += '<button>Show More</button>'; // button to show more info
            group_data += '<div id="more_info">';
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '</div>';    
            group_data += '</div>'; 
      });
      $('#matches').append(group_data);    
  });
 });
</script>

<script>
$( "button" ).click(function() {
  $( "#more_info" ).show(function() {
    // Animation complete.
  });
});  
</script>    

从 AJAX 查询中加载数据，但按钮不起作用？任何想法都会很棒，很乐意回答任何问题，因为我知道我没有解释得很好。

Answer 1

^{正如我所说的} 1st: id 应该是唯一的，所以不要为多个元素使用类使用相同的 id。我在这里谈论 #more_infoyou需要将其更改为类，然后在单击中使用$(this).next(".more_info")。

2nd：看看Event binding on dynamically created elements?

^{请阅读代码中的//comments}

<script>
$(document).ready(function() {
 $.getJSON("http://worldcup.sfg.io/matches", function(data){ 
     var group_data = '';
      $.each(data, function(key, value){
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<h5>'+value.stage_name+'</h5>';
            group_data += '</div>';   
            group_data += '</div>'; 
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td>'+value.location+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.venue+'</td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team_country+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.home_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td><p>-</p></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team.goals+'</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>'+value.away_team_country+'</td>';
            group_data += '</div>';
            group_data += '</div>';
            group_data += '<button>Show More</button>'; // button to show more info
            group_data += '<div class="more_info">'; // >>>>> change id to class <<<<<<<<
            group_data += '<div class="row">';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';    
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td>Test</td>';
            group_data += '</div>';
            group_data += '<div class="col">';
            group_data += '<td></td>';
            group_data += '</div>';
            group_data += '</div>';    
            group_data += '</div>'; 
      });
      $('#matches').append(group_data);    
  });

  // >>>>>>>>>>>>>>>>>>>> button click handler <<<<<<<<<<<<<<
  $(document).on("click" , "button" ,function() {
     $(this).next(".more_info").show(function() { // >>>>> use $(this).next(   <<<<<
        // Animation complete.
     });
  });  
 });
</script>