El elemento SELECT añadido dinámicamente no activa el evento onchange en Internet Explorer

Por lo que yo sé, esto solo se rompe en Internet Explorer. Tengo un script que crea múltiples elementos dinámicos <select> y agrega un evento onchange para ellos. El evento onchange se activa en Firefox sin problemas, pero en Internet Explorer nunca se dispara. Usando Developer Toolbar veo que el DOM tiene el evento correcto en la lista, simplemente nunca se dispara. He reducía el problema al siguiente código:El elemento SELECT añadido dinámicamente no activa el evento onchange en 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>

El mensaje de alerta estática sube muy bien, pero la dinámica no hace nada en Internet Explorer. Estoy casi seguro de que he visto este trabajo en otro lado, pero parece que no puedo encontrar otros ejemplos. ¿Alguien ve/sabe de una forma de hacer que esto funcione?

Fuente

2009-07-17 Agent_9191

Cambio:

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

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

o incluso más corto:

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

Fuente

2009-07-17 17:45:35

O utilizar jQuery para unirse al evento/gatillo :) –

la emisión original utiliza jQuery, y tratando de tratar los eventos como atributos estándar era parte del problema. Por qué IE no solo analiza las cadenas es un gran dolor ... –

Sí, tuve problemas al tratar de usar la función .attr() de jQuery para asignar un evento onchange. La asignación DOM directa de elem.onchange = function() {blah; } funcionó bien para mí. – kdawg

Tomé la solución de http://jehiah.cz/a/firing-javascript-events-properly y recarga de la página (no hay operación del lado del servidor desencadena a través en cambio) después de disparar el evento IE9, que luego funcionó. No estoy seguro acerca de la versión anterior de IE. Descansa, funciona para Chrome y 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); 
    } 
}

Fuente

2011-12-15 06:04:06 vikramaditya234

El elemento SELECT añadido dinámicamente no activa el evento onchange en Internet Explorer

Respuesta

Cuestiones relacionadas