jQuery sur clic du bouton ne fonctionne pas après avoir ajouter

J'ai une page web qui interroge une base de données et envoie les données via jQuery dans un tableau HTML. Je peux retourner les résultats en ajoutant que les données de la table HTML, tout en ajoutant un 'Ajouter à la liste de lecture" bouton sur chaque ligne retournée qui est destiné à envoyer les données de cette ligne à une autre page si besoin est.

Sur ce bouton, rien ne se passe sur mon site (je l'ai mis à m'avertir si les données sont stockées dans le jQuery variable). J'ai testé les fonctions de base dans JSfiddle et il y travaille
alors je me suis dit il doit y avoir un problème avec la façon dont tr.append œuvres? Ou ai-je raté quelque chose d'encore plus évident avec la .on fonction?

jQuery code qui renvoie des données de la base de données:

function (data) {
for (var i = 0; i < data.length; ++i) {
    var tr = $('<tr/>');
    tr.append("<td class='artist'>" + data[i].ARTIST + "</td>");
    tr.append("<td class='title'>" + data[i].TRACKTITLE + "</td>");
tr.append("<td>" + "<button class='send' type='submit'>Add to playlist!</button>" + "</td>");

$('#table').append(tr);
}

jQuery code qui trouve des données du retour de la ligne et magasins de variables

$(function(){
     $('button').on('click', function(){
     var tr = $(this).closest('tr');
     var title = tr.find('.title').text();
     var artist = tr.find('.artist').text();
     alert('title: '+title+', artist: ' + artist);
});
});
  • Non, pas encore! Utilisation délégués des gestionnaires d'événement ?
InformationsquelleAutor Byate | 2014-01-07
  1. 8

    Vous pouvez faire quelque chose comme ceci en utilisant événement délégation,

    $(function(){
     $('#table').on('click','button', function(){
     var tr = $(this).closest('tr');
     var title = tr.find('.title').text();
     var artist = tr.find('.artist').text();
     alert('title: '+title+', artist: ' + artist);
   });
});
    • +1, mais en utilisant le sélecteur de #table au lieu de document. Vous devriez idéalement choisir le plus proche de l'élément conteneur.
    InformationsquelleAutor Pranav C Balan
  2. 3

    Lors de l'ajout dynamique des éléments d'un document, utilisez l' .sur()'s délégué du gestionnaire d'événement de la syntaxe:

    $('#table').on('click', 'button', function(){
    InformationsquelleAutor j08691