2012-06-11 7 views
5

Stavo usando il metodo $.click() per l'attivazione di alcuni eventi. Ma poi ho avuto bisogno di impostare alcuni eventi per alcuni elementi HTML prima che gli elementi fossero dichiarati. Prendiamo questo come esempio:incerto sul metodo .on()

<script> 
    $('div.hide').click(function() { 
     $('div.hide').css({'display' : 'none'}); 
    }); 
</script> 
<div class="hide">some text</div> 

Il rovescio della medaglia è che quando si imposta il metodo .click(), non esiste il div.hide elementi, in modo che nessun innesco è impostato.

così ho girato al metodo .on(), in questo modo:

<script> 
    $('div.hide').on('click', function() { 
     $('div.hide').css({'display' : 'none'}); 
    }); 
</script> 
<div class="hide">some text</div> 

Ma anche questo non funziona. Pensavo che chiamare .on() avrebbe reso tutti gli elementi esistenti e futuri div.hide attivando lo 'click' function().

Sono riuscito a superare questo inconveniente, ma per la mia conoscenza mi piacerebbe sapere cosa stavo facendo male. Non c'è modo di assegnare un trigger a futuri elementi HTML?

mio solituion era:

<script> 
    $(document).ready(function() { 
     $('div.hide').click(function() { 
      $('div.hide').css({'display' : 'none'}); 
     }); 
    }); 
</script> 
<div class="hide">some text</div> 
+1

Nota circa il $ (document) .ready (function() {}) ',' involucro, che aggiunge un gestore di eventi per l'evento pronto per il documento, in modo che il codice all'interno non venga eseguito fino a quando l'evento non viene attivato. Ciò garantisce che la pagina sia completamente renderizzata prima dell'esecuzione dello script rispetto a quando javascript analizza ed esegue diversamente durante il rendering della pagina. –

risposta

10

vi siete persi la versione a tre argomenti:

$('body').on('click', 'div.hide', function() { ... }); 

che mette il gestore del <body> ma cattura gli eventi che bolla e richiama il gestore quando il elemento di destinazione corrisponde al selettore (il secondo argomento).

Il gestore non deve andare sul <body>; può essere un elemento contenitore principale del tuo <div>.

Il metodo "on" sostituisce i vecchi metodi "live" e "delegate", nonché "bind" stesso.

+0

Un altro motivo per cui l'iper-sovraccarico di 'on' era una cattiva idea. Io uso sempre "delegato" per la delega e "on" (o una delle sue scorciatoie) per la non-delegazione, proprio per questo motivo. –

+1

@ T.J.Crowder sì, non capisco veramente quale fosse il punto. – Pointy

+2

Penso che il punto importante qui è che ha bisogno di allegare l'evento da qualche parte, e il posto più CHIUSO possibile nel DOM è il luogo ideale/migliore, quindi un DIV con un ID in cui sono inseriti gli elementi inesistenti sarebbe il migliore . +1 per quello - poichè l'OP sembra NON comprendere che l'allegato all'elemento inesistente NON si attacca ancora. –

-2

Usa jQuery.live method per collegare un gestore di eventi per tutti gli elementi che corrispondono al selettore di corrente, ora e in futuro

+3

Il metodo ".on()", introdotto con la versione 1.7, sostituisce il " .l Ive() "metodo. Infatti, ".live()" stesso è stato sostituito da ".delegate()" qualche tempo fa. – Pointy

Problemi correlati