jQuery在IE8中的append方法无法工作

Question

jQuery在IE8中的append方法无法工作

8

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

我的代码在Internet Explorer中无法运行，我不知道为什么。所有其他浏览器都可以正常运行，但IE却不行。它甚至没有添加一个文本框。

- Falk S.

你是在没有 table 包装器的情况下向 div 中添加行吗？ - Joseph Silber

不要添加行。只返回翻译后的文本：$和#都不用加。 - Falk S.

有些混淆，通常$xxx变量是用于jQuery对象，而不是像他所使用的数字类型。 - Bob Fincheimer

好的，你并不是没有尝试添加行。 - Chris Farmer

5个回答

4

看起来你正在直接将 tr 添加到 <div> 中，这在任何浏览器中都不是有效的 HTML。其他浏览器可能不会报错，但 IE 会报错。请尝试以下更改。演示 标记更改

<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);
        });

- ShankarSangoli

你的意思是在任何浏览器中都没有追加吗？ - ShankarSangoli

进入您最喜欢的浏览器开发工具，如Firebug等，查看您的代码创建的节点结构。 - Chris Farmer

在fiddle中它运行良好，但在IE中哪个点不起作用呢？我不明白，我会检查HTML是否格式正确。 - Falk S.

3

看起来你是在将单个TR附加到一个div中，这可能是你的问题。你应该将它附加到TABLE的TBODY中。

- Blazemonger

0

问题是:

您是否定义了$counter？
您是否定义了$countonlyadd？
您在#buttondiv中是否有<table>包装器?

请思考这些问题，如果结果是“否”，那就是问题所在。

如果您有<table>包装器，请更改。

$('#buttondiv').

到

$('#buttondiv table').

- genesis

但是你没有</table>包装器 ;) - genesis

然后考虑将内容直接添加到表格中，而不是直接添加到div中。 - Chris Farmer

那么考虑将内容追加到表格中，而不是直接追加到DIV中。我会尝试它。 - Falk S.

0

也许如果您先创建元素会更有帮助...所以为您的行、列、文本框等创建对象。然后将它们相互附加。最后将该行附加到您的 div 上。除此之外，将行添加到 div 而不是表格有点奇怪...

- Bas Slagter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zulucoda · Accepted Answer

问题出在IE兼容模式上。这在IE9和火狐浏览器中都能正常工作http://jsfiddle.net/NP9pG/3/，但当你切换到IE兼容模式时，它就不能正常工作了。

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

但是在IE兼容模式下，这个http://jsfiddle.net/NP9pG/4/可以正常工作。

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

问题出在你的HTML标记上，建议进行以下更改：

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

应该将项目添加到table而不是div元素中。

因此，JavaScript代码如下：

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

希望这有所帮助。