Discussion :

[alex8276]

Bonjour à tous,
Je souhaiterais savoir comment il est possible d'utiliser un bouton qui a été créé dynamiquement (jquery)
Sur l'image ci dessous, le bloc jaune est créé dynamiquement lorsque je selectionne un élément d'une liste déroulante. Le bouton "+" mepermet d'ajouter une ligne avec les input.
Comment puis je utiliser le bouton "+" situé dans le bloc jaune.

J'ai essayé ça mais cela ne fonctionne pas ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$('#addS'+i+'').on('click',function(){
			$('#lesSeries').append('<div id="serieEx1">\
							<label for="repSerie1" class="col-sm-3 control-label">Reps :</label>\
							<div class="col-sm-2">\
							       <input type="text" id="repSerie1" class="form-control">\
							</div>\
							<label for="chargeSerie1" class="col-sm-3 control-label">Charge :</label>\
						<div class="col-sm-2">\
							<input type="text" id="charge1" class="form-control">\
						</div>\
					</div>');
		});

De plus quelles différences il y a entre $('#addS'+i+'').on('click',function() et $('#addS'+i+'').click(function(){}. Dans mon cas j'ai le même résultat

Merci

[SpaceFrog]

http://www.developpez.net/forums/d15...t-charge-ajax/
même combat

[alex8276]

Bonjour,
Merci pour ce retour. J'ai regardé je ne comprend pas trop.
J'abandonne pour le moment et regarderais ce soir aprés mon sport

[alex8276]

Alors la je sèche ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#seance').on('click','.test',function(){
		         alert('ok');
			$('#addS'+i+'').click(function(){
				$('#lesSeries').append('<div id="serieEx1">\
											<label for="repSerie1" class="col-sm-3 control-label">Reps :</label>\
											<div class="col-sm-2">\
												<input type="text" id="repSerie1" class="form-control">\
											</div>\
											<label for="chargeSerie1" class="col-sm-3 control-label">Charge :</label>\
											<div class="col-sm-2">\
												<input type="text" id="charge1" class="form-control">\
											</div>\
										</div>');
		});
	});

Avec ce code le alert s'affiche bien lors du click sur mes nouveaux boutons. Mais la suite ne fonctionne pas ....
lorsque je remplace

Code :

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

on('click','.test',function(){

par on('load','.test',function(){} ça ne fonctionne pas...
Est ce mon

Code :

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

$('#addS'+i+'').click(function(){

qui ne serait pas bon ?

EDIT: Bon j'avance petit a petit. J'arrive a rendre actif mon bouton. Maintenant je cherche a faire en sorte que mes champs s'ajoute dans le bon block. Visiblement $('#lesSeries'+i+'').append() ne fonctionne pas . Il faut que je trouve comment faire. Enfin si quelqu'un sait et veut me le dire je le remercie

EDIT 2: Bon j'avance a taton mais bon, j 'avance tout de même !! J'arrive a ajouter mes champs dans le block que je veux. Je sais pas si le code est trés propre mais le voici:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#seance').on('click','.addSerie',function(e){
			//alert(e.target.id);
			var parent = '#'+e.target.id;
			var parents = '#'+$(parent).parent().parent().attr('id');
			alert('name: '+parents);
			//$('#addS'+i+'').click(function(){
				$(parents).append('<div id="serieEx'+i+'">\
							<label for="repSerie'+s+'" class="col-sm-3 control-label">Reps :</label>\
							<div class="col-sm-2">\
								<input type="text" id="repSerie'+s+'" class="form-control">\
							</div>\
							<label for="chargeSerie'+s+'" class="col-sm-3 control-label">Charge :</label>\
							<div class="col-sm-2">\
								<input type="text" id="chargeSerie'+s+'" class="form-control">\
							</div>\
						</div>');
			//});
		});

[danielhagnoul]

Code jQuery incompréhensible et non testable sans les codes HTML et CSS.