Buongiorno
il mio problema è il seguente:
ho due div (contenitore e contenitore1) contenti un form con due campi ciascuno.
Quello che voglio è colorare di giallo il campo su cui mi posiziono con il click del mouse.
l'HTML è il seguente:
<div id="contenitore">
<form id="form" name="form" method="post" action="">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" /><br /><br />
<label for="Cognome">cognome</label>
<input type="text" name="cognome" id="cognome" /><br /><br />
</form>
</div>
<div id="contenitore1">
<form id="form1" name="form1" method="post" action="">
<label for="nome1">Nome</label>
<input type="text" name="nome1" id="nome1" /><br /><br />
<label for="Cognome1">cognome</label>
<input type="text" name="cognome1" id="cognome1" /><br /><br />
</form>
</div>
Se utilizzo il seguente script tutto funziona correttamente:
<script>
$("#contenitore input").click(function sfondo() {
$('#contenitore *').css("background-color",""); //reset dello sfondo
$(this).css("background-color","yellow");});
$("#contenitore1 input").click(function sfondo() {
$('#contenitore1 *').css("background-color",""); //reset dello sfondo
$(this).css("background-color","yellow");})
</script>
se voglio scorporare la funzione e chiamarla ad ogni evento passandole il nome del div in questo modo....:
<script>
function sfondo(conte) {
console.log("sfondo");
console.log(conte);
$(conte + " *").css("background-color",""); //reset dello sfondo
$(this).css("background-color","yellow");};
$("#contenitore input").click(sfondo('contenitore'));
$("#contenitore1 input").click(sfondo('contenitore1'));
</script>
.... il comportamento che noto (ho messo i due console.log per capire cosa succedeva) è il seguente:
appena carico la pagina, nella console ottengo come output
sfondo
contenitore
sfondo
contenitore1
poi non succede più nulla, nemmeno se clicco sui campi. Come se l'evento non si attivasse più.
Qualcuno sa colmare la mia infinita ignoranza da novellino?
grazie mille