web-dev-qa-db-fra.com

Attacher un événement click à un objet JQuery non encore ajouté au DOM

J'ai eu beaucoup de mal à attacher l'événement click à un objet JQuery avant de l'ajouter au DOM.

En gros, j'ai ce bouton qui renvoie ma fonction, puis je l'ajoute au DOM. Ce que je veux, c'est retourner le bouton avec son propre gestionnaire de clics. Je ne veux pas le sélectionner dans le DOM pour attacher le gestionnaire.

Mon code est le suivant:

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

Le bouton qui est renvoyé est incapable d'attraper l'événement click. Cependant, si je le fais (après l'ajout du bouton dans le DOM):

$('#my-button').click(function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

Cela fonctionne ... mais pas pour moi, pas ce que je veux.

Cela semble être lié au fait que l'objet ne fait pas encore partie du DOM.

Oh! En passant, je travaille avec OpenLayers et l’objet DOM auquel j’ajoute le bouton est un OpenLayers.FramedCloud (qui ne fait pas encore partie du DOM mais le sera une fois que deux événements sont déclenchés.)

javascriptjqueryjavascript-eventsonclick
154
danielrvt

Utilisez ceci. Vous pouvez remplacer body par n'importe quel élément parent existant sur dom ready

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

Regardez ici http://api.jquery.com/on/ pour plus d’informations sur l’utilisation de on () car il remplace live () à partir de la version 1.7. 

Vous trouverez ci-dessous la version à utiliser.

$ (sélecteur) .live (événements, données, gestionnaire); // jQuery 1.3+

$ (document) .delegate (sélecteur, événements, données, gestionnaire); // jQuery 1.4.3+

$ (document) .on (événements, sélecteur, données, gestionnaire); // jQuery 1.7+

247
ᾠῗᵲᄐᶌ

Je suis vraiment surpris que personne n'ait encore posté ceci

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
})

Si vous n'êtes pas sûr des éléments qui figureront sur cette page à ce moment-là, joignez-le à document. 

Remarque: ceci est sous-optimal du point de vue des performances - pour obtenir une vitesse maximale, il faut essayer de l'attacher au parent d'élément à insérer le plus proche.

33
Matas Vaitkevicius

Essayez ceci .... Remplacez le corps par le sélecteur parent

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});
20
Vins

Essayer:

$('body').on({
    hover: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    },
    click: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    }
},'#my-button');

Exemple jsfiddle.

Lors de l'utilisation de .on () et de la liaison à un élément dynamique, vous devez faire référence à un élément qui existe déjà sur la page (comme body dans l'exemple). Si vous pouvez utiliser un élément plus spécifique qui améliorerait les performances.

Les gestionnaires d'événements ne sont liés qu'aux éléments actuellement sélectionnés; ils doit exister sur la page au moment où votre code appelle l'appel à .on () . Pour vous assurer que les éléments sont présents et peuvent être sélectionnés, exécutez l'événement liaison dans un gestionnaire de document prêt pour les éléments qui se trouvent dans le fichier Balisage HTML sur la page. Si un nouveau code HTML est injecté dans la page, sélectionnez les éléments et attachez des gestionnaires d’événements après que le nouveau code HTML est devenu placé dans la page. Ou utilisez des événements délégués pour attacher un événement gestionnaire, comme décrit ensuite.

Src: http://api.jquery.com/on/

8
j08691

Vous devez l'ajouter. Créez l'élément avec:

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

Ensuite, si vous ajoutez cela fonctionnera.

Regardez votre exemple ici et une version simple ici .

8
Marconi

Sur événement

$('#my-button').on('click', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

Ou ajoutez l'événement après append

1
Jorge

la méthode jQuery .on est utilisée pour lier des événements même sans la présence d'élément au chargement de la page . Voici le link

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

Avant jquery 1.7, la méthode . live () était utilisée, mais elle est maintenant obsolète.

0
Nishu Tayal

Complément d'informations pour les personnes qui utilisent .on () pour écouter les événements liés aux entrées dans les cellules de tableau récemment chargées; J'ai réussi à lier les gestionnaires d'événements à de telles cellules de tableau en utilisant delegate (), mais .on () ne fonctionnait pas.

J'ai lié l'ID de table à .delegate () et ai utilisé un sélecteur qui décrit les entrées.

par exemple.

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

jQuery 

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});
0
Fabien Haddadi

Est-ce que l'utilisation de .live fonctionne pour vous?

$("#my-button").live("click", function(){ alert("yay!"); });

http://api.jquery.com/live/

MODIFIER

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d’événements. Les utilisateurs d'anciennes versions de jQuery doivent utiliser .delegate () plutôt que .live ().

http://api.jquery.com/on/

0
PsychoDUCK