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.

Mihir Bhende · Accepted Answer · 2017-05-10 16:53:38Z

1

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

Use following :

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

answered May 10, 2017 at 16:53

Mihir Bhende

9,0952 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Make ajax call on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related