IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

remove ne fonctionne pas avec des éléments créés dynamiquement


Sujet :

jQuery

  1. #1
    Membre du Club
    Profil pro
    Développeur Web
    Inscrit en
    Août 2003
    Messages
    111
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2003
    Messages : 111
    Points : 63
    Points
    63
    Par défaut 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 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 ?

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    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...*/
    });

  3. #3
    Membre du Club
    Profil pro
    Développeur Web
    Inscrit en
    Août 2003
    Messages
    111
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2003
    Messages : 111
    Points : 63
    Points
    63
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 16/08/2010, 15h33
  2. sort by ne fonctionne pas avec des subtables
    Par ekremyilmaz dans le forum JSF
    Réponses: 1
    Dernier message: 27/07/2010, 13h17
  3. Réponses: 4
    Dernier message: 05/06/2008, 18h14
  4. [Make] ne fonctionne pas avec des .cpp
    Par Jean_Benoit dans le forum Systèmes de compilation
    Réponses: 3
    Dernier message: 19/09/2006, 21h32
  5. [VBA-Excel] Tri de listview ne fonctionne pas avec des nombres à virgule
    Par marsupilami34 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 12/09/2006, 15h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo