Discussion :

[Cheorches]

Bonjour,

Je suis en train de créer un formulaire pour des réservations. Par défaut dans le html j'ai une une 'ligne" de trois champs (date, heure début, heure de fin).

Code html :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- Section -->
					<div class="add-listing-section margin-top-45">
 
						<!-- Headline -->
						<div class="add-listing-headline">
							<h3><i class="sl sl-icon-location"></i> Dates</h3>
						</div>
 
						<div id="dates" class="submit-section">
 
							<!-- Row -->
							<div id="line1" class="row with-forms">
 
								<!-- Address -->
								<div class="col-md-5">
									<h5>Intervention</h5>
									<input type="date" id="date1" name="date1" placeholder="">
								</div>
 
								<!-- City -->
								<div class="col-md-3">
									<h5>Heure de début</h5>
									<input type="time" id="start1" name="start1">
								</div>
 
								<!-- Zip-Code -->
								<div class="col-md-3">
									<h5>Heure de fin (approximative)</h5>
									<input type="time" id="end1" name="end1">
								</div>
 
								<div class="col-md-1 margin-top-55 fm-close"><a class="delete" href="#"><i class="fa fa-remove"></i></a></div>
 
							</div>
							<!-- Row / End -->
 
						</div>
						<a href="#" id="add-a-form" class="button add-pricing-list-item">Ajouter une date</a>
					</div>
					<!-- Section / End -->

J'ai créé une fonction en jquery qui rajoute des lignes a la demande du client sans problème

Code :

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

1
2
3
4
5
6
7
8
9
10
//add a line in the form
 
var i = 2
 
$('#add-a-form').click(function()
	{
	event.preventDefault();
	$('#dates').append('<!-- Row --><div id="line'+i+'" class="row with-forms"><!-- Date--><div class="col-md-5"><h5>Intervention</h5><input type="date" id="date'+i+'" name="date'+i+'" placeholder=""></div><!-- City --><div class="col-md-3"><h5>Heure de début</h5><input type="time" id="start'+i+'" name="start'+i+'"></div><!-- Zip-Code --><div class="col-md-3"><h5>Heure de fin (approximative)</h5><input type="time" id="end'+i+'" name="end'+i+'"></div><div class="col-md-1 margin-top-55 fm-close"><a class="delete" href="#"><i class="fa fa-remove"></i></a></div></div><!-- Row / End -->');
	i = i+1;
	})

Ensuite j'ai créé une fonction pour enlever une ligne. Sauf que celle ci fonctionne bien pour la ligne en en dur dans le html mais pas pour celles créées par ma premiere fonction.

Code :

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

1
2
3
4
5
6
//remove a line
 
$('.fm-close').click(function(){
	event.preventDefault();
	$(this).parent().remove();
	console.log("hello world");

*oui j'aime bien mettre un "hello world"...

Pouvez-vous m'orienter sur mon erreur s'il vous plait ?

[Toufik83]

Bonjour,

Il faudrait passer le clic par délégation :

Code :

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

1
2
3
$('#dates').on("click",".fm-close",function(){
   /*le code js...*/
});

[Cheorches]

Bonjour Toufik,

Merci beaucoup pour ton astuce, ca fonctionne nickel.

Je vais me pencher sur la délégation pour mieux la comprendre. Je suis dev backend, alors le front ça a l'air simple dans la théorie mais dans la réalité un peu moins