javascript - 单击按钮进行 ajax 调用

Question

我有一个按钮，我想运行一个函数来进行 ajax 调用和一些其他任务。我将按钮的 id 设置为单击功能，但单击它时无法执行任何操作。

$.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(){
        }
    });
});

按钮本身不在页面的 html 上，而是在另一个函数期间动态输出。不确定这是否是原因，但当前状态下的按钮没有响应。

Answer 1

对于动态插入的元素，请使用单击而不是仅单击。

使用以下内容:

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