4

私はtrいくつかの証明書の後に追加しようとしています、trそして私はこのコードを使用します。しかし、それは2倍にすることによって追加されています、最初は1回だけ、2回目は2回、3回目は6 ...誰かがこれがこの問題を引き起こしている場所を助けてくれますか？trクリックごとに1つだけ追加したいだけです。

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。一度だけ呼び出すと機能します（デモ）。

編集：あなたのアップデートから、はい、「追加」リンクがクリックされるたびにリスナーをバインドしています。で意味のあるアクションonclickを実行することと、特定のイベントで実行するようにリスナーをバインドすることとを混同しています。

insertAfterが実行されるとき、あなたは実行されませんeinfugen。einfugenクリックが発生するたびに実行するようにコードを指示するリスナーを追加するだけです。そのため、最初は1回だけ電話をかけることができ、その後はリスナーが常にそこにいます。クリックするたびに追加する必要はありません。

最初は次のようにリスナーをバインドできます。

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

$(function() { ... });で関数を実行するための省略形はどこにありますかDOMReady。つまり、すべてのDOMノードがスクリプトによってアクセス可能であることが保証されるとすぐに。

デモ。

于 2013-02-08T13:30:18.367 に答える
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 に答える