4

我试图tr在一些 certian 之后追加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>

感谢帮助

4

3 回答 3

3

您可能会多次调用该函数。

不要使用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/

于 2013-02-08T13:31:22.753 回答
2

您的einfugen()函数声明了单击处理程序，并从此处的单击事件中调用它：

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

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

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

在那里注册点击处理程序消除了对内联onclick处理程序代码的需要。

于 2013-02-08T13:35:05.457 回答
2

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

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

运行时您insertAfter没有einfugen运行。einfugen只需添加一个侦听器，该侦听器指示该代码在单击发生时运行。因此，最初可以进行一次呼叫，然后您的听众将永远在那里。它不应该在每次点击时添加。

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

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

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

演示。

于 2013-02-08T13:30:18.367 回答