jQuery append non funziona in IE8

Question

$('#buttonadd').click(function(){ 
      if ($counter < 10) 
      { 
       $counter++; 
       $countonlyadd++; 
       $('#buttondiv').append('<tr><td><select class="combo" name="combo'+$counter+'" style="width: 60px;" size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input type="text" name="textbox'+$counter+'" class="textbox" value="" /><a id="removetxt" class="removetxt" style="text-decoration: none;line-height: 3;" href="#">&nbsp;[X]</a></td></tr>'); 
      }else{ 
      } 
      $('#send_count').val($countonlyadd); 
     }); 

Il mio codice non funziona in Internet Explorer e non so perché. Tutti gli altri browser sono ok ma IE no. Non aggiunge neanche 1 casella di testo.

Answer 1

ya il problema è la modalità di compatibilità di IE. Funziona perfettamente in IE9 http://jsfiddle.net/NP9pG/3/ e firefox ma quando si passa alla modalità di compatibilità IE non funziona.

<div id="buttondiv"> </div> 
<div id="send_count"></div> 
<input type="button" id="buttonadd" value="add" /> 

ma questo http://jsfiddle.net/NP9pG/4/ funzionerà tho bene in modalità di compatibilità di IE

<table id="buttondiv"> </table> 
<div id="send_count"></div> 
<input type="button" id="buttonadd" value="add" /> 

ya il problema è tuo html mark-up come suggerito apportare la seguente modifica

<div id="buttondiv"> 
    <table id="tableData"></table> 
</div> 

piuttosto Aggiunge gli elementi a table anziché div elemento

codice js quindi:

$('#tableData').append('<tr><td><select class="combo" name="combo'+$counter+'" style="width: 60px;" size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input type="text" name="textbox'+$counter+'" class="textbox" value="" /><a id="removetxt" class="removetxt" style="text-decoration: none;line-height: 3;" href="#">&nbsp;[X]</a></td></tr>'); 

speranza che aiuta

Answer 2

Le domande sono:

• Ti hanno definito $ contatore?
• Avete definito $ countonlyadd?
• Hai < table> wrapper in #buttondiv?

pensare a queste domande e se il risultato è "no", questo è il problema

Se hai < table> involucro, modificare

$('#buttondiv'). 

a

$('#buttondiv table'). 

Answer 3

E ' sembra che tu stia aggiungendo un singolo TR a un div, il che potrebbe essere il tuo problema. Dovresti invece aggiungerlo al TBODY di una TABLE.

Answer 4

Forse è utile se si creano gli elementi per primi .. quindi si crea un oggetto per la riga, la colonna, la casella di testo, ecc. E si aggiunge l'uno all'altro. Infine aggiungi la riga al tuo div. Inoltre, è un po 'strano aggiungere una riga a un div e non a un tavolo ...

Answer 5

Sembra che si aggiunga uno tr direttamente nel quale non è un html valido in alcun browser. Altri browser non urleranno ma IE lo farà. Prova questo.

Lavorare demo

cambiamento Markup cambiamento

<div id="buttondiv"> 
    <table></table> 
</div> 

JS

$('#buttonadd').click(function(){ 
      if ($counter < 10) 
      { 
       $counter++; 
       $countonlyadd++; 
       $('#buttondiv table').append('<tr><td><select class="combo" name="combo'+$counter+'" style="width: 60px;" size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input type="text" name="textbox'+$counter+'" class="textbox" value="" /><a id="removetxt" class="removetxt" style="text-decoration: none;line-height: 3;" href="#">&nbsp;[X]</a></td></tr>'); 
      }else{ 
      } 
      $('#send_count').val($countonlyadd); 
     });