Click non pris en compte sur un élément inséré

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

j'ai un petit soucis car j'insère un élément avec jquery (Une popup pour être plus précis) et j'ai des boutons du type "Ok, Annuler, Valider, …".

Voici comment ça se présente un petit peu en image: Popup

Le code de la popup une fois ajouter (Juste après mon article, mais finalement placé en fixed donc pas grande importance [je crois ..] dans mon code):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="active" style="width: 600px; height: 150px;" id="inpopup">
    <div id="popup_title">
        <h3>Version</h3>
    </div>

    <div id="popup_content">
        <p>Actuellement en version beta</p>
        <div class="line">
            <button id="butt_ok">Ok</button>
        </div>
    </div>
</div>

[edit]Je me rend compte maintenant que je bouton devrait être après le div popup_content, mais ça ne change rien.

Le jquery que j'utilise pour ajouter mes popups:

 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
/* Close popup off an external clicks */
$(document).mouseup(function (e){
   var container = $("#popup");
   if (container.has(e.target).length === 0){
       $('#popup').remove();
   }
});

/* Functions popup */
function definePopup(){
  $('#content').after(function(){
      return '<div id="popup"><div id="inpopup"><div id="popup_title"></div><div |id="popup_content"></div></div></div>';
  });
}
function addPopup(module){
  $.getJSON("../assets/php/popup.php?pop=" + module, function(json){
      definePopup();
          $('#popup_title').append(json.title);
          $('#popup_content').append(json.content);
          $('#inpopup').css("width", json.width).css("height", json.height);
          $('#popup').addClass("active");
          $('#inpopup').addClass("active");
  }); 
}

$('#version').click(function (e){
  e.preventDefault();
  addPopup('version');
});

Le Jquery que j'essaye d'utiliser pour reprendre les cliques sur les boutons:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* Action popup */
$('.butt_ok').mouseup(function(e){
    e.stopPropagation()
    alert("SALUT");
    $('#popup').remove();
});
$('.butt_annule').click(function(){
    $('#popup').remove(); /* Temporaire */
});
$('.butt_valide').click(function(){
    $('#popup').remove(); /* Temporaire */
});

Le problème est donc quand je clique sur un des boutons, rien ne se passe … une erreur d'inatention ? Il ne me semble pourtant pas mais ne sait-on jamais.

(Et si vous avez besoin de plus de code, n'hésiter pas).

En vous remerciant, WinXaito.

Édité par WinXaito

+0 -0
Auteur du sujet

Merci !

Donc comme j'ai pu le voir dans la doc, je dois faire quelque chose comme ceci ?

1
2
3
4
5
6
$('body').delegate('.butt_ok', 'click', function() {
  $('#popup').remove();
});
$('body').delegate('.butt_annule', 'click', function() {
  $('#popup').remove();
});

Vraiment merci viki53, toujours la à la rescousse !

WinXaito

Édité par WinXaito

+0 -0

Salut !

Vu que tu utilises jQuery, tu peux utiliser la méthode .on(), qui lie aussi aux éléments ajoutés au DOM après son chargement. Ça revient un peu à ce que tu as fait, mais c'est la méthode conseillée depuis jQuery 1.7, si j'en crois la documentation de la méthode .delegate() – encore une notion de dépréciation  ;)

Édité par Ymox

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+0 -0
Auteur du sujet

J'ai vu ça dans un cours sur jquery (La méthode vraiment déprécier est .live().

J'ai testé avec .on(). Mais je ne sais pas si j'ai fais une erreur, mais ça n'a pas fonctionner. Et je n'ai pas approfondie.

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte