51 messaggi dal 15 maggio 2012
Salve a tutti,

ho un problema con l'assegnazione di una mia funzione ad una serie di bottoni.

Quello che voglio fare in breve è recuperare tutti i miei bottoni di una certa classe ed assegnargli una funzione a cui devo, tra l'altro, passare un parametro.

Questo codice:
function prova(atxt) {
    var buttons = $('.tblButton');

    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onClick(ciao(atxt));
    }
}

function ciao(txt){alert('ciao' + txt)};


a runtime mi segnala il seguente errore:

Uncaught TypeError: Object #<HTMLButtonElement> has no method 'onClick'

Questo penso voglia dire che non seleziono in maniera corretta i bottoni,magari seleziono i riferimenti e non gli oggetti veri e propri...
Inoltre credo di sbagliare il modo in cui assegno la funzione al metodo onclick ma non ho trovato il modo di assegnare una funzione comprensiva di parametri...qualcuno saprebbe aiutarmi?
11.886 messaggi dal 09 febbraio 2002
Contributi
ciao,
tieni sempre a portata di mano la documentazione di jQuery, ti aiuta ad evitare errori.
Inoltre, se sviluppi con Visual Studio, hai anche a disposizione l'intellisense che ti mostra i metodi che puoi usare.

Procediamo con ordine. Tu vuoi selezionare degli elementi (bottoni) che portano una certa classe.
$('.tblButton')

Quello che hai scritto è corretto, hai giustamente usato il selettore delle classi.
Guardando nella documentazione, si scopre che quell'espressione restituisce un oggetto chiamato "jQuery", che non è il tipico array javascript, come si potrebbe pensare, ma è molto più ricco e dispone di tanti metodi, che puoi trovare elencati qui:
http://api.jquery.com/

Tra quelli, trovi il metodo .click() che ha la particolarità di operare su ciascuno degli elementi trovati dal tuo selettore. Da qui ne consegue che non devi più fare un ciclo for. E' il metodo .click che lo fa per te.

La sintassi, quindi, diventa molto concisa.
$('.tblButton').click(function(){ /*qui codice da eseguire al click */ });

Adesso portiamolo nel tuo contesto: al click tu devi invocare la funzione ciao passandole un parametro. Molto semplicemente, puoi fare così:
function prova(atxt) {
$('.tblButton').click(function(){  
    //chiamo la funzione
    ciao(atxt);
});
}
function ciao(txt){alert('ciao' + txt);};

Ora funziona e potremmo fermarci qui, ma portiamo la tua funzione ciao in un ambito un po' più ristretto, dato che ora è dichiarata globalmente.
Se si tratta di una sola funzione non c'è problema, ma avere moltissime funzioni e variabili globali causerà problemi di performance alla tua applicazione.

Quindi, sposta la dichiarazione di ciao all'interno dell'altra funzione prova

function prova(atxt) {
    
    //dichiaro ciao all'interno della function prova
    //questo le da un ambito più ristretto di quello globale
    function ciao(txt){ alert('ciao' + txt); };

    $('.tblButton').click(function(){ ciao(atxt); });
    

}

Volendo fare un'ulteriore ottimizzazione, puoi liberarti di quella function(){...} che viene creata al solo scopo di invocare ciao con un parametro.
Guardando la documentazione, si scopre che il metodo click già consente il passaggio di parametri alla funzione. Quindi:
function prova(atxt) {
    //definisco la funzione localmente.
    //Dovrò usare txt.data per accedere al valore passato perché
    //txt ora è diventato un eventObject
    function ciao(txt){ alert('ciao' + txt.data); };

    //il primo parametro è il valore di atxt. Il secondo è il riferimento alla funzione
    $('.tblButton').click(atxt, ciao);  

}
ciao
Modificato da BrightSoul il 14 dicembre 2012 21.25 -

Enjoy learning and just keep making
51 messaggi dal 15 maggio 2012
Perfetto,grazie mille,semplice ed esaustivo,terrò presente più spesso la documentazione! Grazie ancora!

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.