Question

我想在tr之后追加tr并使用此代码。但它增加了一倍，第一次只有1次，第二次是2次，第三次是6次......有人可以帮助我解决导致这个问题的原因吗？我只想为每次点击添加一个tr。

function einfugen(){
  $('#append_tr').bind('click', function(){
    $('<tr><td>new td</td></tr>').insertAfter('#append_tr');
  });
}



<tr id="append_tr"> some data </td>

编辑：这是我的绑定代码：

<tr id="append_tr"><td> <a onclick="einfugen()"> + add </a> </td></tr>

感谢您的帮助

Answer 1

您可能多次调用此功能。

不要使用bind并使用on（jQuery 1.7）：

$('#append_tr').on('click', function(){
    $('<tr><td>new td</td></tr>').insertAfter('#append_tr');
});

http://api.jquery.com/bind/

从你的编辑：

 <a onclick="einfugen()">

是问题所在。每次单击链接时，您都要重新绑定事件处理程序。

使用以下结构：

$("#append_tr").click(function() {
   $("#table").append("<tr><td>New row!</td></tr>");
});

http://jsfiddle.net/mBNbZ/

Answer 2

听起来你不止一次打电话给einfugen。如果您只调用一次，它将起作用（Demo）。

编辑：在您的更新中，是的，每次点击“添加”链接时，您都会绑定一个侦听器。你会混淆触发一个在onclick中合理的动作，将一个侦听器绑定到一个给定的事件。

运行insertAfter时，einfugen未运行。 einfugen只是添加一个监听器，指示只要发生点击就会运行代码。因此，最初可以进行一次调用，然后您的听众将始终在那里。它不应该在每次点击时添加。

您最初可以像这样绑定侦听器：

$(function() {
  $('#append_tr').bind('click', function(){
    $('<tr><td>new td</td></tr>').insertAfter('#append_tr');
  });
});

其中$(function() { ... });是在DOMReady上运行函数的简写，即只要脚本可以保证所有DOM节点都可以访问。

Demo

Answer 3

您的einfugen()函数声明了点击处理程序，并在此点击了点击事件：

<tr id="append_tr"><td> <a onclick="einfugen()"> + add </a> </td></tr>

点击它越多，附加的点击处理程序就越多。您可以做的是删除einfugen()函数声明，但将内容移到DOM ready函数中：

$(function() {
    $('#append_tr').on('click', function(){
    $('<tr><td>new td</td></tr>').insertAfter('#append_tr');
  });
});

在其中注册了click处理程序，无需使用内联onclick处理程序代码。

insertAfter（）通过加倍追加

3 个答案: