单击提交按钮时，JavaScript代码输出两次

由于某些原因，下面示例中的代码在单击按钮时会一直输出两次，我无法找出原因。单击提交按钮时，JavaScript代码输出两次

var onClick = function() { 
 
    var cars = ["Saab", "Volvo", "BMW"]; 
 
    var rows = ""; 
 
    rows += "<tr><td> " + cars[0] + " </td></tr>"; 
 
    $(rows).appendTo("#list tbody"); 
 
}; 
 

 
$('#button').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<input type="button" id="button" value="Click Me" /> 
 
<table id="list" class="table table-bordered; sortable"> 
 
    <thread> 
 
    <tr> 
 
     <th>Group Name</th> 
 
    </tr> 
 
    </thread> 
 
    <tbody></tbody> 
 
</table>

JSFiddle。

来源

2016-07-30 ray dauodi

您的小提琴代码与您的代码段不同。 – James

@Xufox我刚刚纠正了谢谢你们 –

这是因为你有一个错字：<thread>应该是<thead>。

这个错字导致你的表结构为无效，使得浏览器试图将其校正成这样：

<thread></thread> 
<table id="list" class="table table-bordered; sortable"> 
    <tbody> 
    <tr> 
     <th>Group Name</th> 
    </tr> 
    </tbody> 
    <tbody></tbody> 
</table>

因此，您<table>有2个<tbody>元素，使得"#list tbody"选择产生结果，因此附加两次。

来源

2016-07-30 01:38:55 Xufox

这是因为您的表thead有错字。我修正了这个更新的Fiddle。

<input type="button" id="button" value="Click Me" /> 
     <table id="list" class="table table-bordered; sortable"> 
       <thead> 
        <tr> 
         <th>Group Name</th> 
        </tr> 
       </thead> 
       <tbody></tbody> 
      </table>

来源

2016-07-30 01:39:24 James

单击提交按钮时，JavaScript代码输出两次

回答

相关问题