[Jquery] uso di .on() per evento su elementi HTML aggiunti

**Phate72** · 27-09-2012, 18:50

Salve
sto scrivendo uno script lato client e non riesco ad intercettare un evento click su un elemento HTML. la pagina incriminata ha un codice HTML di questo tipo:

codice:

<body id="pippo" class="flexible">
     <div id="container">
          <div id="locations">
                <div id="position0" class="b">
                <div id="position1" class="b">
                     <div id="js_Position1Img" class="ba"></div>
                          
                     </div>
                <div id="position2" class="b">
          </div>
      </div>
</body>

Cliccando su anchor id ="js_Position1Link", viene aggiunta alla pagina la parte di HTML che mi interessava. la pagina a questo punto è cosi:

codice:

<body id="pippo" class="flexible">
     <div id="container">
          <div id="locations">
                <div id="position0" class="b">
                <div id="position1" class="b">
                     <div id="js_Position1Img" class="ba"></div>
                          
                     </div>
                <div id="position2" class="b">
          </div>
// HTML aggiunto in un secondo momento
          <div id="pluto_c" class="t">
               <div id="pluto" class="m">
                    <div class="mainContent">
                          <div id="tabSendPluto">
                               <div class="contentBox01h">
                                    <div class="content ">
                                         <ul class="c">
                                              <li id="js_plutoBox321" class="plutoBox">
                                                 <a id="js_plutoLinkBox321" class="pluto_box_bg" href="index.php?view=pluto" onclick="ajaxHandlerCall(this.href);return false;">
                                                      <div class="boxContent">
                                                          <div id="js_plutoBoxC" >Pluto</div>
                                                      </div>
                                                 </a>
                                              [/list]
                                     </div>
                               </div>
                           </div>
                     </div>
               </div>
          </div>
// fine HTML aggiunto
     </div>
</body>

Problema: io dovrei aggiungere evento click su anchor ID = "js_plutoLinkBox321", per modificare l'html che a sua volta viene aggiunto alla pagina con la chiamata "ajaxHandlerCall".

Tentativi fatti con jquery sono:

codice:

// evento click direttamente su anchor
$('#container').on('click','#js_plutoLinkBox321', function(){alert('pluto');});
// evento click su nodo parente
$('#container').on('click','li', function(){alert('pluto');});
// evento click su nodo figlio
$('#container').on('click','a div.boxContent', function(){alert('pluto');});
// evento click su tutti i div
$('#container').on('click','div', function(){alert('pluto');});

Nessuno dei precedenti eventi viene generato, ho provato ad attaccare il metodo .on() al body con $('#pippo') ma niente anche così. Cosa per me strana è che aggiungento l'evento su tutti i div, se clicco su un div esterno al mio anchor l'evento viene generato. Nei div interni all'anchor non viene generato nulla, perchè?.

Attualmente riesco a raggiungere il mio scopo aggiungendo l'evento click al body.

codice:

$('#pippo').click(function(){alert('pluto');})

ma mi sembra una soluzione barbara

Per testare lo script uso:
Firefox 15.0.1
Geasemonkey 1.1
JQuery 1.8.1

**Vindav** · 27-09-2012, 23:08

devi applicare il metodo on al document o al body

**Phate72** · 28-09-2012, 14:08

Come dal precedente post avevo provato anche sul body, ma niente. Adesso ho provato con document .... ma nulla.
Io ho aggiunto altri 3/4 eventi simili e funzionano, ad esempio questo:

codice:

$('#container').on('click','#sidebar a[href*=pluto]',function(){
	alert('pluto');
});

All'inizio pensavo che il problema fosse che gli anchor hanno l'evento onClick impostato, ma anche gli altri hanno la stessa struttura.
Una differenza importante, che ho notato solo adesso, è l'unico anchor che viene cancellato quando si clicca sopra.
Quando viene generato l'evento .on()?
Può essere che se l'evento .on(click) non viene generato perchè html viene cancellato?

**Vindav** · 28-09-2012, 14:29

$(document).on('click', 'elemento su cui deve avvenire il click', function(){
...
});

**Phate72** · 28-09-2012, 15:40

Originariamente inviato da Vindav

$(document).on('click', 'elemento su cui deve avvenire il click', function(){
...
});

si proprio lui ... ti dirò di più se metto come elemento il 'div' e clicco su qualunque elemento div al di fuori dell'anchor mi esegue la funzione, se invece clicco su un 'div' figlio dell'anchor no.
$(document).on('click', 'div', function(){
...
});
Può essere un discorso valido quello che l'evento 'onclick' dell'anchor, cancellando se stesso, non fa intercettare l'evento click a jquery .... o è una cavolata!!!

**Vindav** · 28-09-2012, 16:29

prova a levare l'onclick inline e inserisci la chiamata al metodo ajaxHandlerCall dentro l'on:

$(document).on('click', "#js_plutoLinkBox321", function(e){
e.preventDefault();
ajaxHandlerCall(this.href);
});

**Phate72** · 28-09-2012, 21:23

Grazie Vindav per l'idea e questa volta ci speravo veramente .... ma dopo diverse prove non ho ottenuto nulla.

Ho provato anche a cancellare sia l'onClick che l'hRef dell'anchor, immaginavo che cliccando non accadesse nulla ... invece si è caricata ugualmente, quindi direi che c'è un altro evento che io non riesco a trovare che carica la parte di html che mi interessa.

Qualche suggerimento come posso trovarlo con Firebug?

Discussione: [Jquery] uso di .on() per evento su elementi HTML aggiunti

Strumenti discussione

Ricerca discussione

Visualizza

[Jquery] uso di .on() per evento su elementi HTML aggiunti

Permessi di invio