Discussion :

[Mell]

Bonsoir,

C'est un problème un peu dans le même contexte qu'un autre que j'ai déjà posté sauf que la solution de mon autre soucis ne règle pas celui là..
Donc je fais appel à vous..

J'ai un formulaire de création de film. Voici la partie du formulaire qui nous intéresse :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<label>Représentation(s) : </label><br />
 
        <div id="representation">
 
            <div class="representation">
 
                Date : (jj-mm-aaaa)
 
                <input type="text" name="date_rep[]" style="width:70px" />
 
                Heure : 
 
                <input type="text" name="heure_rep[]" style="width:40px" />
 
                Catégorie public : 
 
                <select name="categorie_rep[]">
 
                    <option value="public">Public</option>
 
                    <option value="privee">Privée</option>
 
                </select>
 
                Commentaire :
 
                <input type="text" name="comm_rep[]" style="width:250px" />
 
                <input type="button" class="suppr_cat_menu" />
 
            </div>
 
        </div>
 
        <br />
 
        <input type="button" name="ajout_rep" id="ajout_rep" value="Ajouter une représentation" />

Quand je clique sur ce bouton (présent dans le bout de code ci-dessus) :

Code :

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

<input type="button" name="ajout_rep" id="ajout_rep" value="Ajouter une représentation" />

Il active ce jQuery :

Code :

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

1
2
3
4
5
$('#ajout_rep').click(function(){
           var cont = $('.representation').html();
           $('#representation').append("<div class='representation'></div>");
           $('.representation').html(cont);
       });

Du coup ma div avec la classe representation est dupliqué pour pouvoir créer mes séances par rapport au film.

Le problème, c'est qu'une fois que j'ai dupliqué ce bout de code, ce code jQuery ne fonctionne plus :

Code :

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

1
2
3
4
$('.suppr_cat_menu').click(function(){
           alert('toto');
           //more.remove();
       });

Ici, je veux supprimer une div avec la classe representation ou est contenu ce bouton supprimer qui me sert à virer la ligne

Code :

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

<input type="button" class="suppr_cat_menu" />

J'ai mis une classe puisque ce bouton est aussi dupliqué/supprimé.. Mais rien ne fonctionne une fois mon code dupliqué..

Je ne sais pas si vous avez tout compris, j'ai un peu de mal à m'expliquer.
Mais si vous avez une solution je suis preneuse et je vous en remercie d'avance.

Amicalement,

[Bovino]

C'est normal, tu ne peux pas attacher un événement à un élément qui n'existe pas !
Pour ça, jQuery a tout prévu avec les méthodes .live() (déconseillé), .delegate() ou .on() (recommandé).
Faire aussi une recherche sur la délégation d'événements.

[Mell]

Hmm d'accord.
J'avais lu déjà ce que faisait ces fonctions mais je n'avais pas tout compris..
Donc je vais y regarder de plus prêt.

Tu verrais plus un truc dans ce genre ?:

Code :

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

1
2
3
$("#representation").delegate(".suppr_cat_menu", "click", function() {
  // mon code pour supprimer la div class='representation'
});

Je vais m'orienter là dessus et effectuer des tests

Edit : bon bah c'est bon cette partie du code fonctionne, mais je n'arrive pas a supprimer juste la ligne que j'ai envie, il me supprime tout ou rien lol

Edit 2 : problème résolu grâce à ce code :

Code :

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

1
2
3
$("#representation").delegate(".suppr_cat_menu", "click", function(){
           $(this).parent().remove();
       });

Tout ça pour ça lol...
Si ça peut aider ceux qui ont des soucis comme moi..