données Manipulate retour d'un appel AJAX jQuery

Question

j'ai un appel AJAX en utilisant jQuery:

$('.add a').click(function() { 
    $.ajax({ 
     type: 'POST', 
     url: '/ajax/fos', 
     context: this, 
     datatype: 'html', 
     success: function(data){ 
      $(this).parents('tr').before(data); 
     } 
    }); 
}); 

Une fois exécuté, il ajoute une nouvelle ligne à une table. La ligne est verbatim à d'autres lignes dans la table (structure-sage), mais sans données.

J'ai deux autres appels jQuery qui manipulent les données sur la ligne, mais les appels ne fonctionnent pas sur les nouvelles lignes de table en utilisant l'appel AJAX. Plus précisément, lorsqu'une liste déroulante (sélection/option) change, elle effectue un appel AJAX pour remplacer le contenu d'une autre liste déroulante. Une autre fonction supprime la ligne si vous voulez la supprimer.

Ce sont les fonctions qui ne fonctionnent pas:

$('.fos').change(function() { 
    $.ajax({ 
     type: 'POST', 
     url: '/ajax/courses', 
     context: this, 
     data:({ 
      fos_id: $(this).val(), 
      name: $(this).find(':selected').text() 
     }), 
     success: function(data){ 
      $(this).next().html(data); 
     } 
    }); 
}); 

$('td.remove a').click(function() { 
    $(this).parents('tr').remove(); 
}); 

Est-ce que cela a quelque chose à voir avec l'appel AJAX ne pas enregistrer la nouvelle ligne avec DOM ou cela peut-il pas fait?

Answer 1

Lorsque vous exécutez le code que vous avez sur document.ready, jQuery est littéralement liant les événements à toutes les lignes existantes à ce moment. Pour que jQuery soit informé des modifications DOM possibles, vous devez utiliser la fonctionnalité live de jQuery. Pour faire au mieux ce que vous voulez, vous voulez probablement utiliser delegate comme ceci:

$("#yourTable").delegate("select.fos", "change", function(){ 
    // .... 
}); 

$("#yourTable").delegate("td.remove a", "click", function(){ 
    // .... 
}); 

La façon dont cela fonctionne est en liant les événements au sélecteur (#yourTable) et de laisser la bulle des événements à la hauteur, de sorte que tout les modifications au contenu de la table sont couvertes.