Albind evento click ad un object JQuery non ancora aggiunto al DOM

Ho avuto un sacco di problemi nel colbind l’evento click a un object JQuery prima di aggiungerlo al DOM.

Fondamentalmente ho questo pulsante che restituisce la mia funzione, quindi lo aggiungo al DOM. Quello che voglio è restituire il pulsante con il proprio gestore di clic. Non voglio selezionarlo dal DOM per colbind il gestore.

Il mio codice è questo:

createMyButton = function(data) { var button = $('
') .css({ 'display' : 'inline', 'padding' : '0px 2px 2px 0px', 'cursor' : 'pointer' }).append($('').attr({ //'href' : Share.serializeJson(data), 'target' : '_blank', 'rel' : 'nofollow' }).append($('').css({ "padding-top" : "0px", "margin-top" : "0px", "margin-bottom" : "0px" }))); button.click(function () { console.log("asdfasdf"); }); return button; }

Il pulsante che viene restituito non è in grado di catturare l’evento click. Tuttavia, se lo faccio (dopo aver aggiunto il pulsante al DOM):

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

Funziona … ma non per me, non quello che voglio.

Sembra essere correlato al fatto che l’object non è ancora una parte del DOM.

Oh! A proposito, sto lavorando con OpenLayers, e l’object DOM a cui sto aggiungendo il pulsante è OpenLayers.FramedCloud (che non fa ancora parte del DOM ma una volta verranno triggersti ​​un paio di eventi).

Usa questo. Puoi sostituire il corpo con qualsiasi elemento genitore esistente su dom ready

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

Guarda qui http://api.jquery.com/on/ per maggiori informazioni su come usare on () in quanto sostituisce live () a partire da 1.7+.

Qui di seguito elenca la versione che dovresti usare

$ (selettore) .live (eventi, dati, gestore); // jQuery 1.3+

$ (documento) .delegate (selettore, eventi, dati, gestore); // jQuery 1.4.3+

$ (document) .on (eventi, selettore, dati, gestore); // jQuery 1.7+

Sono davvero sorpreso che nessuno lo abbia già pubblicato

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

Se non sei sicuro su quali elementi saranno presenti in quella pagina in quel momento, collegalo al document .

Nota: ciò non è ottimale dal punto di vista delle prestazioni: per ottenere la massima velocità, è necessario provare a colbind l’elemento padre più vicino dell’elemento che verrà inserito.

Prova questo …. Sostituisci il corpo con il selettore genitore

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

Provare:

 $('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'); 

esempio di jsfiddle .

Quando si utilizza .on () e si associa a un elemento dinamico, è necessario fare riferimento a un elemento già esistente nella pagina (come il corpo nell’esempio). Se è ansible utilizzare un elemento più specifico che migliorerebbe le prestazioni.

I gestori di eventi sono associati solo agli elementi attualmente selezionati; devono esistere nella pagina nel momento in cui il tuo codice effettua la chiamata a .on (). Per garantire che gli elementi siano presenti e possano essere selezionati, eseguire il binding degli eventi all’interno di un gestore pronto per il documento per gli elementi presenti nel markup HTML sulla pagina. Se il nuovo codice HTML viene iniettato nella pagina, selezionare gli elementi e associare i gestori di eventi dopo che il nuovo codice HTML è stato inserito nella pagina. In alternativa, utilizzare gli eventi delegati per colbind un gestore di eventi, come descritto di seguito.

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

Devi accodarlo. Crea l’elemento con:

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

Quindi se lo aggiungi funzionerà.

Dai un’occhiata al tuo esempio qui e una versione semplice qui .

In caso

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

Oppure aggiungi l’evento dopo l’aggiunta

L’uso di .live funziona per te?

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

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

MODIFICARE

A partire da jQuery 1.7, il metodo .live () è deprecato. Usa .on () per albind gestori di eventi. Gli utenti di versioni precedenti di jQuery dovrebbero usare .delegate () preferibilmente a .live ().

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

Il metodo jQuery .on viene utilizzato per associare eventi anche senza la presenza dell’elemento sul caricamento della pagina. Ecco il link Si usa in questo modo:

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

Prima di jQuery 1.7,. è stato usato il metodo live () , ma ora è deprecato.

Complemento di informazioni per coloro che usano .on () per ascoltare eventi legati su input all’interno di celle di tabella caricate di recente; Sono riuscito a associare gestori di eventi a tali celle di tabelle usando delegate (), ma .on () non avrebbe funzionato.

Ho associato l’id della tabella a .delegate () e ho utilizzato un selettore che descrive gli input.

per esempio

HTML

 

jQuery

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

Forse bind () aiuterebbe:

 button.bind('click', function() { alert('User clicked'); });