Pourquoi mon gestionnaire d’événements jQuery échoue-t-il lorsqu’il est attaché à plusieurs éléments?

J’utilise jquery pour append plusieurs nouveaux éléments de formulaire “addTask” à un “ul” sur la page chaque fois qu’un lien est cliqué.

$('span a').click(function(e){ e.preventDefault(); $('
  • \
      \
    • \
    • \
    \ ') .appendTo('#toDoList'); saveTask(); });
  • Ces nouveaux éléments ul nesteds ont tous un bouton de même classe “saveTask”. J’ai ensuite une fonction qui vous permet de sauvegarder une tâche en cliquant sur un bouton avec la classe “saveTask”.

     // Save New Task Item function saveTask() { $('.saveTask').click(function() { $this = $(this); var thisParent = $this.parent().parent() // Get the value var task = thisParent.find('input.taskName').val(); // Ajax Call var data = { sTitle: task, iTaskListID: 29 }; $.post('http://localhost:8501/toDoLists/index.cfm/Tasks/save', data, function(data) { var newTask = '' + task + '' thisParent.find('li.sTitle').html(newTask); }); return false; }); } 

    Cela permet essentiellement à l’utilisateur de saisir du texte dans une entrée de formulaire, d’appuyer sur Enregistrer, puis la tâche est enregistrée dans la firebase database à l’aide de ajax et affichée sur la page à l’aide de jQuery.

    Cela fonctionne bien lorsqu’il n’y a qu’un seul élément sur la page avec la classe “saveTask”, mais si j’ai plus d’un élément de formulaire avec la classe “saveTask”, il cesse de fonctionner correctement, car la variable “var task” indique “indéfini “plutôt que la valeur réelle de la saisie de formulaire.

    Ne comptez pas sur la méthode .parent() . Utilisez .closest('form') place. Donc, la ligne suivante:

     var thisParent = $this.parent().parent() 

    devrait ressembler à ceci:

     var thisParent = $this.closest('form'); 

    EDIT: En fonction des informations mises à jour que vous avez fournies, il semble que lorsque vous essayez d’enregistrer le gestionnaire d’événements click, il échoue pour une raison quelconque. Essayez plutôt ce javascript, car il utilisera l’événement en live afin que tous les éléments récemment ajoutés à la page aient automatiquement l’événement click automatiquement. ::

     $(function(){ $('span a').click(function(e){ e.preventDefault(); $('
  • \
      \
    • \
    • \
    \ ') .appendTo('#toDoList'); }); $('.saveTask').live('click', function() { $this = $(this); var thisParent = $this.closest('ul'); // Get the value var task = thisParent.find('input.taskName').val(); // Ajax Call var data = { sTitle: task, iTaskListID: 29 }; $.post('http://localhost:8501/toDoLists/index.cfm/Tasks/save', data, function(data) { var newTask = '' + task + '' thisParent.find('li.sTitle').html(newTask); }); return false; }); });
  • Commencez par transformer la tâche de sauvegarde en une fonction:

     (function($){ $.fn.saveTask= function(options){ return this.each(function(){ $this = $(this); $this.click(function(){ var thisParent = $this.parent().parent() //get the value var task = thisParent.find('input.taskName').val(); // Ajax Call var data = { sTitle: task, iTaskListID: 29 }; $.post('http://localhost:8501/toDoLists/index.cfm/Tasks/save', data, function(data){ var newTask = '' + task + '' thisParent.find('li.sTitle').html(newTask); }); }); }); return false; })(jQuery) 

    Lorsque l’application démarre, définissez le sélecteur saveTask sur ceci:

     function saveTask(){ $('.saveTask').saveTask(); } 

    Puis sur votre fonction add:

     function addTask(){ $newTask = $("
    Some Task stuff
    "); $newTask.saveTask(); }

    Ce code est écrit très rapidement et n’est pas testé, mais il crée essentiellement une extension jQuery qui gère la soumission des données. Ensuite, chaque fois qu’une tâche est créée, appliquez-lui l’extension de tâche de sauvegarde.

    Je pense que vous recherchez l’ événement en direct .

    De plus, votre code est un peu gênant, car l’événement click n’est ajouté que lorsque la fonction saveTask () est appelée. En fait, la fonction saveTask () n’enregistre rien, elle ajoute simplement l’événement click aux éléments de la classe .saveTask.

    Quelle est votre structure HTML?

    Il semble que votre code ne trouve pas l’élément input.taskName .

    Essayez de définir thisParent sur quelque chose comme $this.closest('form') . (Selon votre HTML)

    Vous pouvez essayer d’envelopper votre fonction click dans un each ()

    c’est à dire

     function saveTask(){ $('.saveTask').each (function () { $this = $(this); $this.click(function() { var thisParent = $this.parent().parent() //get the value var task = thisParent.find('input.taskName').val(); // Ajax Call var data = { sTitle: task, iTaskListID: 29 }; $.post('http://localhost:8501/toDoLists/index.cfm/Tasks/save', data, function(data){ var newTask = '' + task + '' thisParent.find('li.sTitle').html(newTask); }); return false; }); }) } 

    Je trouve que cela aide parfois lorsque vous avez des problèmes avec plusieurs éléments ayant la même classe