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

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:

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.

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

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 

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.