单击提交按钮时 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>有两个 <tbody>元素，使得 "#list tbody"选择器产生两个结果，因此将其附加两次。