Question

出于某种原因，下面示例中的代码在单击按钮时保持输出两次，我无法找出原因。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

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"选择器产生两个结果，从而将其附加两次

Answer 2

这是因为你的桌子上有错字。我在更新后的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>

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

2 个答案: