IE9 Problema: Los botones de opción creados dinámicamente (a través de innerHTML) y las casillas de verificación no funcionan

Question

Estoy trabajando en un proyecto que requiere que pueda extraer html de una página e insertarlo en la página web principal. Funciona totalmente en Chrome y Firefox, pero falla en IE 9. Aquí hay un corte del código que uso.

if (!element.data('cache')) { 

     $('#contentHolder').html('<img src="ajax_preloader.gif" width="64" height="64" class="preloader" />'); 

     $.get(element.data('page'), function (msg) { 
     $('#contentHolder').html(msg); 

     /* After page was received, add it to the cache for the current hyperlink: */ 
      element.data('cache', msg); 
      setTimeout("checkonbox()", 100); 
     }); 
    } 
    else { 
     $('#contentHolder').html(element.data('cache')); 
     setTimeout("checkonbox()", 100); 
    } 

El código HTML que se inyecta es

<table style="width:400px; height: 388px; text-align: left;" align="left"> 
<tr> 
<td><input id="Checkbox0" type="checkbox" onclick="changebuttons();" checked="true"> 
Exclusive.</input></td> 
</tr> 
</table> 

Además de algunos más botones de opción.

Todo parece perfectamente, pero no puedo hacer clic en la casilla de verificación o en los botones de opción.

Answer 1

No puedo ver el código completo en su pregunta. Pero estoy asumiendo que usted no pone el código dentro de inicialización:

$(function() { 
     // your jQuery code here. 
    }); 

Esto ayudará a que el navegador para inicializar los eventos asociados con sus elementos. Pruebe esto y verifique si ocurre algún cambio.

También intente eliminar si hay algún error en javascript. Intenta depurar con el navegador disponible. El mejor depurador de javascript que he encontrado es FireBug, que es un complemento de Firefox.

Answer 2

Nunca he visto una etiqueta de entrada escrita así. Todavía no he tomado mi café de la mañana, pero estoy bastante seguro de que debería ser de cierre automático, en cuyo caso no me sorprendería en absoluto que IE se moleste con lo que tienes allí.

Supongo que la idea era hacer el "Exclusivo". hacer clic en la etiqueta, en el que caso de que quiera una etiqueta etiqueta alrededor de su entrada, algo como esto:

<label for="Checkbox0"><input id="Checkbox0" type="checkbox" onclick="changebuttons();" checked="true" />Exclusive.</label> 

Dale que un torbellino.

Answer 3

Cualquier elemento añadido dinámicamente al dom tendrá que tener acciones vinculadas a él una vez que se haya cargado en la página. Solo dejar caer el código a través de AJAX no lo hará funcionar.

trate de hacer esto en su función:

$.get(element.data('page'), function (msg) { 
     $('#contentHolder').html(msg); 

     //this will bind your input field via javascript 
     $('input#Checkbox0').click(changebuttons); 

     /* After page was received, add it to the cache for the current hyperlink: */ 
      element.data('cache', msg); 
      setTimeout("checkonbox()", 100); 
}); 

Answer 4

Reemplazar

element 

con

$(element) 

que va a funcionar.