jQuery ajout ne fonctionne pas dans 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); 
     }); 

Mon code ne fonctionne pas dans Internet Explorer, et je ne sais pas pourquoi. Tous les autres navigateurs sont ok mais IE ne l'est pas. Il n'ajoute pas encore 1 textbox.

Answer 1

ya le problème est le mode de compatibilité IE. Cela fonctionne très bien dans IE9 http://jsfiddle.net/NP9pG/3/ et Firefox, mais quand vous passez en mode de compatibilité IE, cela ne fonctionne pas.

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

mais cette http://jsfiddle.net/NP9pG/4/ fonctionnera bien tho en mode de compatibilité IE

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

ya le problème est votre marge html comme suggéré faire le changement suivant

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

append plutôt des articles à table au lieu de div élément

Code donc js:

$('#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>'); 

espoir qui aide

Answer 2

Les questions sont:

• Avez-vous de $ contre défini?
• Avez-vous défini $ countonlyadd? Vous avez < table> wrapper dans #buttondiv?

penser à ces questions et si le résultat est "non", c'est le problème

Si vous avez < table> emballage, changer

$('#buttondiv'). 

à

$('#buttondiv table'). 

Answer 3

Il semble que vous ajoutez un TR unique à un div, ce qui peut être votre problème. Vous devez l'ajouter au TBODY d'un TABLE à la place.

Answer 4

Peut-être que cela vous aide si vous créez les éléments en premier ... alors créez un objet pour votre ligne, colonne, zone de texte, etc. Et que de les ajouter l'un à l'autre. Enfin, ajoutez la ligne à votre div. A part ça, c'est un peu bizarre d'ajouter une ligne à une div, et non à une table ...

Answer 5

Apparemment, vous ajoutez un tr directement dans lequel n'est pas un HTML valide dans n'importe quel navigateur. Les autres navigateurs ne crie pas, mais IE le fera. Essaye ça.

travail demo

changement de balisage

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

JS changement

$('#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); 
     });