2009-07-17 7 views
9

Per quanto ne so, solo in Internet Explorer è rotto. Ho uno script che crea più dinamici < seleziona elementi > e aggiunge un evento onchange per loro. L'evento onchange si attiva in Firefox senza problemi, ma in Internet Explorer non si attiva mai. Utilizzo della barra degli strumenti di sviluppo Vedo che il DOM ha l'evento corretto elencato, non viene mai attivato. Ho bollito giù il problema al seguente codice:L'elemento SELECT aggiunto dinamicamente non attiva l'evento onchange in Internet Explorer

<html> 
    <head> 
     <script language="javascript"> 
      function addSelect() { 
       var se = document.createElement('select'); 
       se.setAttribute("onchange", "alert('Dynamic')"); 
       se.options[0] = new Option("1", "1"); 
       se.options[1] = new Option("2", "2"); 
       se.options[2] = new Option("3", "3"); 
       se.options[3] = new Option("4", "4"); 
       var plh = document.getElementById("ph"); 
       plh.appendChild(se); 
      } 
     </script> 
    </head> 
    <body onload="addSelect()"> 
     <select name="something" onchange="alert('Static')"> 
      <optgroup label="set1"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      </optgroup> 
      <optgroup label="set2"> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      </optgroup> 
     </select> 
     <div id="ph"> 
     </div> 
    </body> 
</html> 

Il messaggio di avviso statico viene su bene, ma quella dinamica non fa nulla in Internet Explorer. Sono quasi sicuro di aver visto questo lavoro altrove, ma non riesco a trovare altri esempi. Qualcuno vede/sa di un modo per farlo funzionare?

risposta

11

Cambio:

se.setAttribute("onchange", "alert('Dynamic')"); 

a:

se.setAttribute("onchange", function(){alert('Dynamic')}); 

o ancora più breve:

se.onchange = function(){alert('Dynamic')}; 
+0

Oppure utilizzare JQuery per legare l'evento/grilletto :) –

+0

il problema originale utilizza JQuery, e cercando di trattare gli eventi come attributi standard era parte del problema. Perché IE non solo analizza le stringhe è un grave problema ... –

+0

Sì, ho avuto problemi quando ho provato ad utilizzare la funzione di jQuery .attr() per assegnare un evento onchange. L'assegnazione diretta DOM di elem.onchange = function() {blah; } ha funzionato bene per me. – kdawg

1

ho preso la soluzione da http://jehiah.cz/a/firing-javascript-events-properly e ricaricare la pagina (c'è il funzionamento lato server attivato attraverso sul cambiamento) dopo aver lanciato l'evento IE9, che poi ha funzionato. Non sono sicuro della versione precedente di IE. Riposa funziona per Chrome e FF.

function fireEvent(element,event){ 
    if (document.createEventObject){ 
     // dispatch for IE 
     var evt = document.createEventObject(); 
     element.fireEvent('on'+event,evt); 
     javascript:location.reload(true); 
    } 
    else{ 
    // dispatch for firefox + others 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent(event, true, true); // event type,bubbling,cancelable 
     return !element.dispatchEvent(evt); 
    } 
}