Attacher l'événement de clic à un objet JQuery non encore ajouté au DOM

Question

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

En gros, j'ai ce bouton que ma fonction renvoie, puis je l'ajoute au DOM. Ce que je veux, c'est retourner le bouton avec son propre gestionnaire de clic. 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 retourné est incapable d'attraper l'événement de clic. Cependant, si je fais ceci (après que le bouton soit ajouté au DOM) :

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

Ça marche... 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 ! au fait, 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 qui le sera une fois que quelques événements seront déclenchés).

Answer 1

Utilisez ceci. Vous pouvez remplacer body par n'importe quel élément parent qui existe dans le 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() qui remplace live() à partir de la version 1.7+.

Vous trouverez ci-dessous la liste des versions que vous devez utiliser

$(selector).live(events, data, handler) ; // jQuery 1.3+

$(document).delegate(selector, events, data, handler) ; // jQuery 1.4.3+

$(document).on(events, selector, data, handler) ; // jQuery 1.7+

Answer 2

Essayez ceci : .... Remplacez body par le sélecteur de parent

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

Answer 3

Essayez :

$('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 de jsfiddle .

Lorsque vous utilisez .on() et que vous vous liez à 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, cela améliorera les performances.

Les gestionnaires d'événements sont liés uniquement aux éléments actuellement sélectionnés. doivent exister sur la page au moment où votre code fait l'appel à .on(). Pour vous assurer que les éléments sont présents et peuvent être sélectionnés, effectuez la liaison d'événement à l'intérieur d'un gestionnaire de documents prêts à l'emploi pour les éléments qui se trouvent dans la balise HTML de la page. Si du nouveau HTML est injecté dans la page, sélectionnez les éléments et attachez les gestionnaires d'événements après que le nouveau HTML soit placé dans la page. Vous pouvez également utiliser des événements délégués pour attacher un gestionnaire d'événements, comme décrit ci-après. comme décrit ci-après.

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

Answer 4

Sur l'événement

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

Ou ajouter l'événement après l'ajout

Answer 5

L'utilisation de .live vous convient-elle ?

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

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

EDITAR

Depuis la version 1.7 de jQuery, 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 la méthode .delegate() de préférence à .live().

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