méthode .after(), est-ce un bug de JQuery ?

**comode** · 23/07/2014, 17h11

Bonjour,

J'utilise JQuery pour générer quasiment entièrement des pages, et je suis régulièrement confronté à un problème dont je ne saurais dire s'il s'agit d'un bug ou d'une incompréhension de ma part.

J'utilise JQuery 2.1.1.1

Prenons l'exemple suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$("body").append($("<input />")
	.attr("id", "my_item")
	.attr("type", "text")
	.val("pouet")
	.after(
		$("<label />")
			.attr("for", "my_item")
			.text("tutu")
	)
);

Ca ne marche pas, le label contenant tutu ne s'affichant pas...

En revanche, si j'écrit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var obj = $("body").append($("<input />")
	.attr("id", "my_item")
	.attr("type", "text")
	.val("pouet")
);
obj.after($("<label />")
	.attr("for", "my_item")
	.text("tutu")
);

Là, ça marche, si ce n'est que tutu apparaît à la ligne. Il me semble pourtant que les 2 exemples devraient être équivalent ?

Enfin, si j'écris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$("body").append($("<input />")
	.attr("id", "my_item")
	.attr("type", "text")
	.val("pouet")
);
$("#my_item").after(	$("<label />")
	.attr("for", "my_item")
	.text("tutu")
);

Ca marche aussi et tutu apparaît tout de suite après le input...

Quelqu'un saurait-il expliquer ça ?

En vous remerciant

**Bovino** · 23/07/2014, 17h23

Non. Tes codes ne sont absolument pas équivalents.
Dans le premier, tu demandes dans l'ordre

Créer un élément input (avec différents attributs).
Ajouter dans le DOM un élément label après cet input.
Insérer le tout à la fin du body.

L'étape 2 n'est pas réalisable dans la mesure où l'input n'existe pas dans le DOM au moment où tu demandes d'insérer le label après.

Dans le deuxième code, tu oublies qu'une méthode jQuery renvoie l'objet jQuery qui l'a appelée. Donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").append(...);

renvoie l'élément body et quand tu fais le .after(), c'est après la balise <body> que le label est inséré. Ce qui fonctionne car les navigateurs savent gérer ce type d'erreur, mais body étant de type bloc, il y a un retour à la ligne.

Enfin, tu peux factoriser ton code de création d'élément :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('<input />', {
    id: 'my_item',
    type: 'text',
    value: 'pouet'
})

**SpaceFrog** · 23/07/2014, 17h27

Non c''est normal
after insère l'element après masi dasn el flux de la page ...
Or tu n'as pas fermé le append, ton input n'est donc pas encore dans le flux de la page ...

Ceci fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
$('#test').append($("<input />")
	.attr("id", "my_item")
	.attr("type", "text")
	.val("pouet"))
	.after(
		$("<label />")
			.attr("for", "my_item")
			.text("tutu")
	)
 
                  })

en fermant le append ...

ou alors juste appender pluiseurs éléments à la suite (séparateur virgule)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(function(){
$('#test').append($("<input />")
	.attr("id", "my_item")
	.attr("type", "text")
	.val("pouet"), 
		$("<label />")
			.attr("for", "my_item")
			.text("tutu")
	)
 
                  })