remove ne fonctionne pas avec des éléments créés dynamiquement
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:
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:
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:
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 ?
