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

^如我所说 第一个： ID应该是唯一的，因此不要对多个元素使用类使用相同的ID。我在这里谈论#more_info，您需要将其更改为类，然后单击使用$(this).next(".more_info")。

第二个：看看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>

按钮无法使用jQuery处理AJAX加载的内容吗？

1 个答案: