單擊提交按鈕時，JavaScript代碼輸出兩次

Question

由於某些原因，下面示例中的代碼在單擊按鈕時會一直輸出兩次，我無法找出原因。

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。

Answer 1

這是因爲你有一個錯字：<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"選擇產生結果，因此附加兩次。

Answer 2

這是因爲您的表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>