2011-12-28 4 views
5

Qualcuno può dirmi dove si trova l'errore, io proprio non riesco a vederlo. 'e1 è cambiato' deve essere registrato sulla console quando la selezione cambia.jquery non reagisce all'evento di selezione/modifica dell'opzione

html:

<select name="e1" id="e1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

js:

$('#e1').change(function() { 
    console.log('e1 has changed'); 
}); 

jQuery è sicuramente lavorando dal momento che sono con successo "ottenere" dati del server per altri elementi.

+0

Il codice sembra corretto. Puoi elaborare esattamente ciò che non funziona, o forse dare un caso d'uso in cui questo codice non funziona? – Tejs

+0

Il codice è corretto, il problema non è lì. Puoi spiegare ulteriormente? – Flater

+1

Il tuo codice funziona (hai cambiato console.log in un avviso per semplificarti la vita qui.) Http://jsfiddle.net/NJskv/ – ridecar2

risposta

10

Questo codice

$('#e1').change(function() { 
    console.log('e1 has changed'); 
}); 

è probabile che non nel documento gestore pronto, ed è quindi in esecuzione prima del tuo elemento DOM e1 è pronto. È possibile creare un gestore di documento pronto, che sarà eseguito quando i tuoi elementi DOM sono pronti, come questo

$(function() { 
    $('#e1').change(function() { 
     console.log('e1 has changed'); 
    });  
}); 
+2

+1 per la spiegazione di * perché * dovrebbe essere in un gestore pronto per il documento. – Fenton

1

Lavori per me. Ecco il codice jsFiddle -

http://jsfiddle.net/CC5P6/

$(document).ready(function() { 
    $('#e1').change(function() { 
    alert('e1 has changed'); 
    }); 
}); 
+0

Grazie - ovviamente, hai ragione. – eriq

1

io non l'hai già fatto si dovrebbe avvolgere il codice nel $(document).ready(:

$(document).ready(function() { 
    $('#e1').change(function() { 
     console.log('e1 has changed'); 
    }); 
}); 
0

Questo sta lavorando per me:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
    $(function() { 
     $('#e1').change(function() { 
      console.log('e1 has changed'); 
     }); 
    }); 
</script> 

</head> 
<body> 
<select name="e1" id="e1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
</body> 
</html> 

document.ready è la chiave qui, come altri hanno fatto notare.

0

Per i menu di selezione, l'evento di modifica si verifica quando un'opzione viene selezionata dagli eventi Pulsanti della tastiera e del mouse e da NoScript in modo efficace. Per i campi di testo o le aree di testo, l'evento di modifica si verifica quando il campo perde lo stato attivo. quindi non è possibile utilizzare "cambiamento evento" direttamente (senza selezionare qualsiasi opzione da tastiera o mouse) provare questo cod:

<select name="subpos" id="subpos"> 
<option value="examplel">examplel</option> 
<option value="sample">sample</option> 
<option value="fortest">fortest</option> 
</select> 


<script> 
    $(function() { 
     $('#subpos').change(function() { 
      console.log('subpos has changed'); 
     }); 
     $("#subpos").val('sample');//combo box has change but dont appear in console log. why? 
    }); 
</script> 

dopo l'esecuzione; vedere il log della console non è possibile visualizzare "subpos è cambiato" nel log della console. ma in azione 'i sottovi hanno cambiato' cosa è successo? dovrebbe essere registrato alla console quando la selezione cambia. ora selezionando tale opzione dal menu a discesa è possibile vedere il log di cosole è cambiato