title: JavaScript - Spotify API, fetching playlist tracks
body: <p>I am using spotify api to search for the playlists and then display them in my mobile application. I am using Ajax to get the information from the api which works fine yet I can't seem to be able to populate the div with the results and make it possible for the application to play music snippets as it doesn't want to allow event listeners. You won't be able to see all the variables used but everything before this code works perfectly fine.</p>
  
  <pre><code>var audioObject = null;
  //Spotify page
  $(document).on('pagecreate', '#spotify', function(){
  console.log("Spotify");
  $('#search').on('click', function() {
      //e.preventDefault();
      searchstring = cweather;
  
      if (!searchstring){
          console.log('no input');
          return;
      }
      console.log(searchstring);
      searchPlaylist(searchstring);
  });
  
  });
  
  var userId;
  
  var searchPlaylist = function () {
  $.ajax({
      url: 'https://api.spotify.com/v1/search',
      headers: {
          Authorization: 'Bearer ' + spotifyAccessToken,
      },
      data: {
          q: searchstring,
          type: 'playlist',
          market: 'GB',
          offset: '0',
          limit: '5',
      },
      success: function (response) {
          console.log(response);
  
          var items = response.playlists.items;
          var resultsintohtml = '';
  
          $.each(items, function(index) {
              var id = items[index].id;
              var name = items[index].name;
              //var image = items[index].image[1].url;
              userId = items[index].owner.id;
              console.log(id, name, userId);
              resultsintohtml += '&lt;div style="backgroundColor="red"" data-album-id="' + id + '" class="cover"&gt;&lt;/div&gt;';
          });
  
          console.log(resultsintohtml);
          document.getElementById("results").innerHTML = resultsintohtml;
  
          addclickevents();
      }
  });
  };
  
  var fetchTracks = function (playlistsId, userId, callback) {
  $.ajax({
      url: 'https://api.spotify.com/v1/users/' + userId + '/playlists/' + playlistsId,
      headers: {
          Authorization: 'Bearer ' + spotifyAccessToken,
      },
      success: function (response) {
          console.log(response);
          callback(response);
      }
  });
  };
  
  var addclickevents = function () {
  $('.cover').click(function (e){
      console.log('get song');
      var target = $(this);
  
      if (target.hasClass('playing')) {
          audioObject.pause();
      } else {
          if (audioObject){
              audioObject.pause();
          }
  
          fetchTracks(target.data('playlist-id'), function (data) {
              audioObject = new
              Audio(data.tracks.items[0].preview_url);
              audioObject.play();
              target.addClass('playing');             
          });
          audioObject.addEventListener('pause', function(){
              target.removeClass('playing');
          });
      }
  });
  };
  </code></pre>
  
  <p>As this code is used I get following errors:
  <a href="https://i.stack.imgur.com/RcQg0.png" rel="nofollow noreferrer">Errors</a>
  I have tried renaming the variables yet I get the very same error. I have double checked if there is any missing information from the spotify yet I am using all the available ID's already. Thanks in advance.</p>