Make ajax call on button click

Question

I have a button that I want to run a function that will make an ajax call and a few other tasks. I have the id of the button set to a click function but I cannot get any action when clicking on it.

$.ajax({
       type: "GET",
        data: {
            apikey:"85f6c6b42df5d50c164d2e47183cb357",
            q_artist: artistSearch,
            f_has_lyrics: 1,
            format:"jsonp",
            callback:"jsonp_callback"
        },
        url: "https://api.musixmatch.com/ws/1.1/artist.search",
        dataType: "jsonp",
        jsonpCallback: 'jsonp_callback',
        contentType: 'application/json',
        success: function(data) {
            console.log(data);
            console.log(data.message.body.artist_list[0].artist.artist_name);

            var myHTML = '';
            for (var i = 0; i < 5; i++) {
                myHTML += '<li class="artistName list-group-item">';
                myHTML += '<span class="name">' + data.message.body.artist_list[i].artist.artist_name + '</span></br>';

                if(data.message.body.artist_list[i].artist.artist_twitter_url != ""){
                    myHTML += '<span class="country">Country of Origin: ' + data.message.body.artist_list[i].artist.artist_country + '</span></br>';
                }

                myHTML += '<span class="rating">Artist Rating: ' + data.message.body.artist_list[i].artist.artist_rating + '</span></br>';
                if(data.message.body.artist_list[i].artist.artist_twitter_url != ""){
                    myHTML += '<a href="' + data.message.body.artist_list[i].artist.artist_twitter_url + '"><img border="0" src="twitter.png" width="25" height="25"></a>';
                }else {
                    myHTML += '<span>No Associated Twitter Account</span></br>';
                }
                myHTML += '<button id="getTopTracks">Click Me</button>';
                myHTML += '</div>';
                myHTML += '</li>';
            }
            $('#artist_output').append(myHTML);

        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
        complete: function(){
             $("#ajaxIndicator").modal('hide');
        }

            });
});

$('#getTopTracks').click(function getTopTracks(){
    $.ajax({
        type: "GET",
        data: {
            api_key: "e6e87757bbb9f407413260b6759921e0",
            artist: "drake",
            autocorrect: 1,
            limit: 10
        },
        url: "http://ws.audioscrobbler.com/2.0/artist.getTopTracks",
        dataType: "JSON",
        contentType: 'application/json',

        success: function(data){
            console.log(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
        complete: function(){
        }
    });
});

The button itself is not on the html of the page but is being outputted dynamically during another function. Not sure if that is the reason but the button in this current state is unresponsive.

Answer 1

For elements inserted dynamically use on click instead of just click.

Use following :

$(document).on('click', '#getTopTracks', function(e){
//your code goes here
});