jQuery 如何为每个新的 div 单击添加一个 table 行？

Question

我正在尝试为每个 div 单击创建一个新的 table 行，并为每个人创建一次行 div 所以在同一个 [=16] 上单击两次=] 不会创建两行。

HTML

<div class="block div1"></div>
<div class="block div2"></div>
<div>
    <table class="block table" border="1">
        <thead>
            <tr>
                <th>Number</th>
                <th>Heading</th>
            </tr>
        </thead>
        <tbody class="body">
        </tbody>
    </table>
</div>

Javascript

$('block').on('click', function () {
    $('table.body').append('<tr><td></td> <td></td></tr>');
});

Here is a jsFiddle

Answer 1

$('.block').on('click', function () {
        $('table .body').append('<tr><td></td> <td></td></tr>');
});

你忘记了“.”在块并做了 "table.body" 而不是 "table .body"

Answer 2

在 table 中按照您的类进行操作，您实际上是想这样做：

http://jsfiddle.net/TrueBlueAussie/9vnmuudy/8/

$('.block').on('click', function () {
        $('.table .body').append('<tr><td></td> <td></td></tr>');
});

Answer 3

除了修复不正确的选择器之外，为了让每个绑定目标只触发一次事件，您可以使用 jQuery 的 .one() 方法而不是 .on() ，如下所示：

$('.block').one('click', function () {
    $('table .body').append('<tr><td></td><td></td></tr>');
});

此点击事件最多只会触发每个它所绑定的元素一次。

Updated jsFiddle

jQuery 如何为每个新的 div 单击添加一个 table 行？

jQuery how can I add a table row for every new div thats clicked?

jquery

dom