Problema richiamo funzioni

[pegaso22]

Buongiorno a tutti,
non riesco a risolvere un problema, quando clono un elemento vorrei collegare alcune funzioni ad ogni elemento clonato ma il richiamo è sempre a quello principale.

Vi semplifico la struttura così vediamo come risolvere:

Ho un div con id=prova1, all'interno ho un campo input con id=provainput al quale collego l'evento onchange.

Con un tasto clono il div prova1 e gli do id=prova2

Quando faccio onchange faccio vorrei fare un alert con scritto "1" se faccio onchange di provainput di prova1 e alert "2" se faccio onchange di provainput di prova2

Questo lo script:

$('#prova1 #provainput ').change(function() {
	alert("1");


});

$('#prova2 #provainput ').change(function() {
	alert("2");


});

Spero di essere stato chiaro.
Cosa sbaglio?

[pegaso22]

aggiungo il codice html

<div id="prova1" class="col-xs-12 col-sm-4 col-md-3" style="margin:25px 0 0 0; padding:0;">
	<input type="hidden" name="id" id="inputprova" value="<%=id%>">
</div>


<div id="prova2" class="col-xs-12 col-sm-4 col-md-3" style="margin:25px 0 0 0; padding:0;">
	<input type="hidden" name="id" id="inputprova" value="<%=id%>">
</div>

[cavicchiandrea]

Sta eseguendo un onchange a un div e un campo hidden (che non credo abbia l'evento change), anche id "inputprova" ripetuto non va bene

[pegaso22]

Posto il codice completo che sto utilizzando:

Div principale:

<div id="altrefoto-1" class="col-xs-12 col-sm-4 col-md-3">
	<div class="col-xs-12 col-sm-12 col-md-12">
		<div>&nbsp;Altre foto</div>
		<div class="fileinput fileinput-new" data-provides="fileinput">
			<div id="targetLayeraltrefoto">
			</div>
			<div>
				<div class="progress progress-striped">
					<div id="progress-baraltrefoto" class="progress-bar progress-bar-info active"></div>
				</div>
				<form id="uploadFormaltrefoto" action="uploadaltrefoto.php" method="post" style="margin-top:-15px;">
					<div style="width:100%; max-width:208px; text-align:right;">
						<input type="hidden" name="id" id="id" value="<%=id%>">
						<input name="campoaltrefoto" id="campoaltrefoto" type="file" class="filestyle" data-icon="false">
						<button id="inviaaltrefoto" class="btn btn-primary" type="submit">Salva</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

Clono:

$("#altrefoto-1").clone().attr("id","altrefoto-2").appendTo("#elencoaltrefoto");

Funzioni:

$('#altrefoto-1 #uploadFormaltrefoto #campoaltrefoto').change(function() {
    alert("-1");    
});


$('#altrefoto-2 #uploadFormaltrefoto #campoaltrefoto').change(function() {
    alert("-2");
});

Se campio il valore di campoaltrefoto dentro altrefoto-1 o denttro altrefoto-2 mi richiama sempre la prinma funzione e mi mostra sempre -1

Non riesco a far lavorare separatamente i 2 div.

Cosa sbaglio?

[Vindav]

a parte il fatto che il div elencoaltrefoto non esiste nell' html, il codice mi pare corretto(in teoria dovresti modificare l'id anche dei div figli, non dovrebbe creare problemi ma non si sa mai). Secondo me c'è qualche altro problema nella tua pagina, oppure il codice che hai postato non è esattamente uguale a quello della tua pagina. Un esempio: http://jsbin.com/waxoxapogi/1/edit

Riscontri il problema su tutti i browser?

[pegaso22]

Il <div id="elencoaltrefoto"> è il contenitore del codice presente sopra (div principale).
Hai detto la soluzione giustissima, dovrei cambiare gli id dei div figli e così (son sicuro pure io) non avrei alcun problema.
Come posso modificare gli id interni quando faccio clone()?

[pegaso22]

Ho visto ora l'esempio che mi hai indicato, quello giustamente è perfetto!!
Resta, credo, come unica soluzione quella di modificare gli id dei div figli, io pensavo potesse bastare modificare il nome del div padre (quando facevo il clone) e in qualche modo, anche senza modificare id dei div figli, poter collegare correttamente le funzioni.

[pegaso22]

dimenticavo, avevo già pensato a questa soluzione però non ho trovato materiale su google...

[pegaso22]

Sto provando a modificare gli id dei figli così, ma non modifica nulla

$("#altrefoto-2").find("targetLayeraltrefoto").attr("id","targetLayeraltrefoto2");

cosa sbaglio?

[Vindav]

ripeto che secondo me c'è qualche altro problema, se provi il codice in una pagina nuova(con solo la parte di codice postata) o su qualche editor online riscontri lo stesso problema? Dovrebbe funzionare anche se non modifichi gli id figli.