Le sélecteur jQuery ne se met pas à jour après l'ajout dynamique de nouveaux éléments
Mon sélecteur est:
$('section#attendance input:last')
Cependant, j'ai ajouter une autre entrée à la section#fréquentation. Je veux le sélecteur à maintenant, sélectionnez cet élément (comme il se doit, en raison de la :last
. Cependant, pour une raison quelconque, il n'a pas, et je ne sais pas trop pourquoi?
Voici mon code complet:
$('section#attendance input:last').keydown(function(e) {
if (e.which == 9)
{
var $this = $(this);
var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
$this.parent().append('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />');
}
});
Nouveau Code:
$("section#attendance").on("keydown", "input:last", function(e) {
if (e.which == 9) {
var $this = $(this);
var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
$this.after('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />');
}
});
EDIT: Le problème semble être sur "entrée:dernier", qu'il fonctionne si je viens d'utiliser l'entrée. Aussi, si j'ajoute de la classe de la "dernière" pour le dernier élément, il fonctionne lorsque je utiliser l'entrée.dernier " comme un sélecteur.
source d'informationauteur chintanparikh
Vous devez vous connecter pour publier un commentaire.
En fonction de ce que jQuery version que vous utilisez, vous devez utiliser
.delegate()
(avant de jQuery 1.7) ou.on()
(jQuery 1.7+) ont délégué la gestion des événements qui permettront de gérer les événements pour les éléments qui sont ajoutés dynamiquement. Note.live()
a été abandonné à partir de toutes les versions de jQuery, donc il ne devrait plus être utilisée.À l'aide de
.on()
vous pouvez utiliser ceci:À l'aide de
.delegate()
serait semblable (sauf les arguments sont dans un ordre différent). Vous pouvez voir tous les deux dans la doc jQuery.délégué()
et.sur()
.Délégué la gestion des événements des œuvres en utilisant le "gonflement" de la capacité de certains événements javascript. Cela vous permet d'associer un gestionnaire d'événement pour un parent de l'objet (qui n'est pas d'aller et venir et l'oeil à chaque événement "bulles" à la hauteur de l'enfant, vérifier pour voir si l'événement provient d'un objet avec un sélecteur, et si oui, pour exécuter votre code de gestion des événements. De cette façon, en tant qu'objets d'aller et venir, de leurs manifestations sont toujours traités de façon appropriée.
Que vous avez fait les choses, on lie le gestionnaire d'événement directement à l'objet qui correspond au sélecteur de
'section#attendance input:last'
au moment de l'événement code de liaison couru. À partir de là, il est lié directement à l'objet, que cet objet correspond le sélecteur ou si de nouveaux objets sont ajoutés à la DOM qui correspondent à la sélection. Délégué la gestion des événements à l'aide de.delegate()
ou.on()
permet la gestion des événements de comportement pour être plus dynamique, s'adaptant automatiquement aux changements dans les DOM. Vous avez juste à lier l'événement à un objet parent, qui ne sera pas modifié et il peut suivre automatiquement tous les enfants.De réagir dynamiquement contenu inséré, vous devrez utiliser le délégué des événements. Le traitement actuellement recommandé fonction pour ce faire est
.sur()
(live
est obsolète,bind
etdelegate
sont remplacées).N'utilisez pas de vivre! Utilisation sur
Le live de la méthode a été abandonnée en raison de mauvaises performances, utilisez le sur méthode maintenant à la place.
Aussi il n'y a pas de raison d'avoir de la
section
tag en face de votre sélecteur d'id.Le problème est probablement parce que vous êtes à l'aide de l'événement keydown. Qui utilise réellement se lier à l'encontre de la sélection. Lie que les effets des éléments qui existent lorsqu'il est d'abord attaché. Le JQuery docs dit:
Vous devriez regarder pour remplacer keydown avec quelque chose comme ce qui suit: