erfassen Bild klicken nach Anfügen jquery

Question

Ich habe den folgenden Code:

$('#spotifyAlbum').click(function() { 
      var albums = {}; 
      $.ajax({ 
       url: 'https://api.spotify.com/v1/me/albums', 
       headers: { 
        'Authorization': 'Bearer ' + token 
       }, 
       success: function (response) { 
        $('#testSpotifyAlbumsContainer').show(); 
        for(var i = 0; i < response.total; i++) 
        { 
         $('#testSpotifyAlbums').append("<img src='" + response.items[i].album.images[0].url + "' uri='" + response.items[i].album.uri + "' class='spotifyAlbum'>"); 

        } 

       }, 
       error: function (response) { 
        console.log(response); 
       } 
      }); 
     }); 

    $('.spotifyAlbum').click(function() { 
     console.log("hej"); 
    }); 

Aber wenn ich auf eines der Bilder klicken, wird nichts im Protokoll ausgedruckt. Wer kann mir helfen und erklären, was ich falsch mache?

EDIT:

Ich löste es durch das Hinzufügen von:

$(document).ajaxComplete(function() { 
      $('.spotifyAlbum').click(function() { 
       console.log("Hej"); 
      }); 
     }); 

Answer 1

Standards jQuery Selektoren wie die verwendeten Sie $('.spotifyAlbum').click() Werke nur auf Elemente, die in der DOM in der Zeit der Seite Last vorhanden sind. Wenn Sie beispielsweise durch Ihre AJAX-Anfrage neue DOM-Elemente erstellen, werden diese Elemente von diesem Klickereignis-Listener nicht bemerkt und klickt nicht auf sie.

Es gibt eine Problemumgehung für diesen Fall in jQuery. Vor der Version 1.7 gab es eine .live() Methode, für 1.7+ Verwendung $(document).on('click', '.spotifyAlbum', function() {}); Dieser Selektor wird weiterhin auf alle Klicks auf das gesamte Dokument hören, wird aber nur auf diejenigen ausgelöst, die auf Elemente mit .spotifyAlbum Klasse gemacht wurden.

Dieser Wille funktioniert:

$('#spotifyAlbum').click(function() { 
 
    var albums = {}; 
 
    $.ajax({ 
 
     url: 'https://api.spotify.com/v1/me/albums', 
 
     headers: { 
 
      'Authorization': 'Bearer ' + token 
 
     }, 
 
     success: function (response) { 
 
      $('#testSpotifyAlbumsContainer').show(); 
 
      for(var i = 0; i < response.total; i++) { 
 
       $('#testSpotifyAlbums').append("<img src='" + response.items[i].album.images[0].url + "' uri='" + response.items[i].album.uri + "' class='spotifyAlbum'>"); 
 
      } 
 
     }, 
 
     error: function (response) { 
 
      console.log(response); 
 
     } 
 
    }); 
 
}); 
 

 
$(document).on('click', '.spotifyAlbum', function() { 
 
    console.log("hej"); 
 
});

Answer 2

Ich weiß, dass Sie es bereits gelöst haben, aber nur für Ihr Verständnis Bereitstellung Erklärung. Ich habe nicht genug Reputation, um es als Kommentar hinzuzufügen.

Es funktionierte nicht früher, weil Sie versuchten, Event-Handler an zukünftige Elemente anzuhängen, die zum Zeitpunkt der Anlage nicht vorhanden waren, aber später nach dem Ajax-Aufruf hinzugefügt wurden.

Sie hätten es auch lösen können, indem Sie den Event-Handler an das Dokument selbst anhängen statt an die tatsächlichen Elemente in Ihrem ursprünglichen Code.

$(document).on("click",".spotifyAlbum",function(){ 
    console.log("Hey"); 
}) 

sollte auch funktioniert haben. Mehr über jQuery on Methode here.