Problemi dopo il refresh di un div

Salve a tutti!!!!

Allora sto crando un applicazione piuttosto complessa che permetta la creazione di targhe personalizzate per un azienda che fa incisioni. Ho inserito un div che presenta varie scelte relative ai modelli, e in jQuery ho dato la possibilità di selezionare uno di questi tasti di scelta:

tasto uno ( selezionato )
tasto due (non selezionato)
tasto tra (non selezionato)

Ho creato uno script che al click su una di queste scelte rende selezionato il tasto ( div ) cliccato.

Il problema sorge quando rigenero questo div, praticamente mi presenta le scelte corrette ma lo script sembra non esistere per la pagina web, me lo fa vedere nel DOM ma non lo esegue posso cliccare e ricliccare ma è come se non facessi nulla... Sapete darmi un aiuto? Spero di essere stato chiaro... Grazie,
Maf

Citazione:

---

Originalmente inviato da sportvalley

Salve a tutti!!!!

Allora sto crando un applicazione piuttosto complessa che permetta la creazione di targhe personalizzate per un azienda che fa incisioni. Ho inserito un div che presenta varie scelte relative ai modelli, e in jQuery ho dato la possibilità di selezionare uno di questi tasti di scelta:

tasto uno ( selezionato )
tasto due (non selezionato)
tasto tra (non selezionato)

Ho creato uno script che al click su una di queste scelte rende selezionato il tasto ( div ) cliccato.

Il problema sorge quando rigenero questo div, praticamente mi presenta le scelte corrette ma lo script sembra non esistere per la pagina web, me lo fa vedere nel DOM ma non lo esegue posso cliccare e ricliccare ma è come se non facessi nulla... Sapete darmi un aiuto? Spero di essere stato chiaro... Grazie,
Maf

---

Sarebbe utile, per capire, poter vedere all'opera quello che hai fatto.
A naso però il problema potrebbe essere nel fatto che ricreando gli elementi, perdi il listener associato (anche se hanno lo stesso id che avevano prima).

Dovresti re-bindare l'azione all'elemento.

Scusami ma che intendi per re-bindare???

Questi sono i div:

Codice HTML:

---

<div class="singola_variante">(opzione uno)</div>
<div class="singola_variante">(opzione due)</div>
<div class="singola_variante">(opzione tre)</div>

---

questo è il css:

Codice:

---

.singola_variante {

margin-left:1px;
height:40px;
width:259px;
background:url(../img/dim_normal.png) no-repeat;       
cursor:pointer;
}

.singola_variante_sel {

margin-left:1px;
height:40px;
width:259px;
background:url(../img/dim_sel.png) no-repeat;       
       
}

---

e questo è lo script JS:

Codice:

---

$('.singola_variante').click(function(){
$('.singola_variante_sel').addClass('singola_variante');
$('.singola_variante_sel').removeClass('singola_variante_sel');
$(this).addClass('singola_variante_sel');
$(this).removeClass('singola_variante');
});

$('.singola_variante_sel').click(function(){
$('.singola_variante_sel').addClass('singola_variante');
$('.singola_variante_sel').removeClass('singola_variante_sel');
$(this).addClass('singola_variante_sel');
$(this).removeClass('singola_variante');
});

---

Puoi postare una pagina dove vedere il codice in azione?

basta fare in questo modo: racchiudi tutto in una funzione:

Codice:

---

function attachListenerToDivClick(){
$('.singola_variante').click(function(){
$('.singola_variante_sel').addClass('singola_variante');
$('.singola_variante_sel').removeClass('singola_variante_sel');
$(this).addClass('singola_variante_sel');
$(this).removeClass('singola_variante');
});

$('.singola_variante_sel').click(function(){
$('.singola_variante_sel').addClass('singola_variante');
$('.singola_variante_sel').removeClass('singola_variante_sel');
$(this).addClass('singola_variante_sel');
$(this).removeClass('singola_variante');
});
}

---

a questo punto ogni volta che rigeneri i div richiama la funzione attachListenerToDivClick(). Dovrebbe funzionare così.