Button not working with AJAX loaded content using jQuery?

Question

Each part loaded is going to have more information to view, I was hoping to have this done by using a button loaded with the content. As it is all loaded at once, I'm not sure how to have a button specific to each loop loaded and not generalized as one.

I've tried the following code below and it does not work. While using the button outside of the AJAX script - it works fine but again only for one and not for each loop the button is loaded with.

I'm making an application for the woman's world cup using an 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>

The data is loaded from the AJAX query, but the button doesn't work? Any ideas would be great, happy to answer any questions as I know I haven't explained this too well.

I agree with the Id being unique so either change it to a class or add a count to add to the id so it changes — Keith, Jul 12 '19 at 18:57
1st: id should be unique so don't use same id for more than one element use classes instead.I talk here about `#more_info` you need to change it to class then in the click use `$(this).next(".more_info")`. 2nd: possible duplicate [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mohamed-Yousef, Jul 12 '19 at 18:59

score 1 · Accepted Answer · answered Jul 12 '19 at 19:08

^{As I said} 1st: id should be unique so don't use same id for more than one element use classes instead.I talk here about #more_info you need to change it to class then in the click use $(this).next(".more_info").

2nd: Take a look at Event binding on dynamically created elements?

^{Please read //comments in the code}

<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>

thank you so much for the help, working now. I'm a dumby to all this, thanks again — Patrick Sqaure, Jul 12 '19 at 19:14
You're totally welcome @PaddyChambers .. Have a great day :-) — Mohamed-Yousef, Jul 12 '19 at 19:15
Is it possible to have the same button handler hide the content using the same button? After the user has clicked to show the content — Patrick Sqaure, Jul 12 '19 at 20:58
@PaddyChambers Yes you can use `.toggle()` , `fadeToggle()` , `slideToggle()` OR you can work with `toggleClass()` there're a lot of functions you can use depending on what you want to do.. Look your code is very basic so you'll need to make some search to get what you want there're tons of this example online .. like https://stackoverflow.com/questions/33561097/how-to-show-hide-the-next-div-on-button-click-in-jquery And https://stackoverflow.com/questions/27785890/jquery-show-hide-next-div — Mohamed-Yousef, Jul 13 '19 at 05:11

Button not working with AJAX loaded content using jQuery?

1 Answers1