jquery accedere all'attributo id degli oggetti di una classe css

[guidino]

Ciao a tutti,
ho bisogno dell'aiuto di qualche esperto.

Ho un problema che non riesco a superare

nella sezione javascript della mia pagina html ho messo il seguente jquery per accedere all'attributo id dell'oggetto con classe test su cui faccio click.

funziona sugli oggetti con classe test che si trovano nella pagina in fase di caricamento !


Se dopo il caricamento della pagina aggiungo un altro oggetto con la mina funzione nuovo() (un'immagine per esempio) e assegno a questa la stessa classe test con un nuovo id progressivo, su questi oggetti (che vedo nella pagina) non ho più l'alert sull'attributo id (non aggancia più $(".test").click(function .... )


questo è il codice del $(document).ready(function()

    $(document).ready(function(){
          
          
         $(".test").click(function() {
                  var $this = $(this);
                  idOggettoSelezionato = $this.attr("id");
                  alert (idOggettoSelezionato);
           });        

    }); 

e questo è il codice js con cui aggiungo al dom un nuovo oggetto con classe test

// risorsa è il nome del file immagine completo di path
// l'immagine viene inserita nel contenitore con il suo nuovo id
// nuovoId è una variabile inizializzata fuori 
function nuovo(risorsa)
{
       
      var area="#contenitore";
      
      // incrementa id prima di assegnarlo id al nuovo oggetto
      nuovoId++;
      risorsa = "<img src=\""+ risorsa + "\" />";
      oggetto ="<div class=\"test\" id=\"" + nuovoId +"\">" + risorsa + "</div>";
      $(area).append(oggetto);
      
      //$(oggetto).appendTo('body');    // ho provato anche con questo
      
        
} 

ho incluso questa libreria jquery

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

qualcuno può aiutarmi?

[fcaldera]

Il motivo per cui non funziona è logico
i nuovi elementi sono aggiunti solo dopo aver settato un handler all'evento click per gli elementi già in pagina e non per quelli successivi

Di norma in questa situazione, o quando si avrebbero potenzialmente molti handlers da assegnare si usa l'event delegation che sfrutta la naturale risalita degli eventi nella gerarchia dei nodi del DOM. Ovvero si setta un solo handler al contenitore e si verifica quale elemento ha ricevuto l'evento


nel tuo caso cambia

 $(".test").click(function() {

con

 $("#contenitore").on('click', '.test', function() {

[guidino]

Grazie davvero facaldera.
Funziona.


vorrei farlo funzionare anche su altri oggetti (sempre con classe test) di altri contenitori attivati tramite un click su oggetti di una determinata classe (figura).

quindi nel $(document).ready ho inserito la funzione che aggiorna la variabile del contenitore ma, come prima, funziona solo al caricamento della pagina (sul primo contenitore)

var idContenitore = 1;

$(document).ready(function(){

$('div.figura >a').click(function(){

var item = $(this).attr('id');
var a = item.split("_");

idContenitore = a[0];

});


$(contenitore).on('click', '.test', function() {
var $this = $(this);
idOggettoSelezionato = $this.attr("id");
contenitore="#contenitore_"+idContenitore;
alert (idOggettoSelezionato);
});

ecc.

il click di prima non va su contenitori diversi da quello caricato sul load della pagina


Mi puoi dire dove sbaglio?

[guidino]

Qualche suggerimento?

come vedete io non chiedo codice, ci provo prima da solo.

Potrei chiedere di nuovo una risposta di facaldera o è vietato?

grazie

[bstefano79]

la risposta è che hai rifatto lo stesso errore si prima! devi usare ON

[guidino]

ho provato così ma non funziona

$('div.figura').on('click', '<a>', function() {

mi dici per favore dov'è l'errore?

grazie

[bstefano79]

ma il selettore non era questo??? "div.figura >a"
perchè allora usi <a>????

$('div').on('click', '.figura >a', function() {
......

[Vindav]

secondo me state facendo un po' di confusione, questa parte di codice:

$('div.figura >a').click(function(){

probabilmente è corretta in quanto, da quel che ho capito, i div con classe figura(anche i tag a) son sempre presenti nella pagina.

La parte che interessa invece è questa:

$(contenitore).on('click', '.test', function() {

in quanto gli elementi con classe test vengono generati sucessivamente. Ora se non ho capito male il problema è che possono esistere elementi con classe test fuori dal contenitore originale. Se è cosi la soluzione è molto semplice, trova un contenitore che contenga tutti gli elementi ".test". Va bene anche il body:

$("body").on('click', '.test', function() {

Se invece non ho capito una mazza , cerca di spiegare meglio la situazione.

[guidino]

Esatto i tag <a> sono nel contenitore figura, che sta fuori dai contenitore in cui aggiungo gli oggetti con classe test e servono per rendere attivo un contenitore in modo da sapere dove aggiungere elementi (e questo con l'indicazione di fcaldera funziona).

dal nome del link cliccato vorrei risalire al contenitore da rendere attivo, in modo che quando aggiungo elementi mi vanno in quel contenitore.

la mia domanda è semplicemente come accedere all'attributo id del link che ho cliccato.
ma così non funziona

var idContenitore = 1;

$(document).ready(function(){

$('div.figura >a').click(function(){

var item = $(this).attr('id');
ecc.
});

potete aiutarmi?
Grazie 1000

[cavicchiandrea]

Posta anche html in questione, ritengo ci sia un errore di sintassi.
Tu ora cerchi di recuperare gli id dei tag a contenuti in un div (no span o altro) con classe figura giusto? Nel documento tutta questa sequenza esiste al caricamento?