insertAfter（）通过加倍追加

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

你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处理程序代码。

Answer 2

这听起来像你打电话超过一次einfugen更多。如果您只调用一次，它将起作用（Demo）。

编辑：从你的更新，是的，你每次点击“添加”链接时都绑定一个监听器。你很困惑发起了一个动作，这将在onclick合理，绑定听众在给定事件发射。

当einfugen运行时，您的insertAfter未运行。 einfugen只是添加一个侦听器，指示该代码在发生点击时运行。所以这个调用可以一次完成，最初，然后你的听众将永远在那里。它不应该在每次点击时添加。

你可以监听绑定最初像这样：

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

哪里$(function() { ... });是在DOMReady运行功能的简写，即只要所有的DOM节点都保证是由脚本访问。

Demo。

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