讓按鈕點擊調用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 
});