0

テーブルのレコードを削除する簡単なコードを書きましたが、

<td><a href = "#" class = "delete">Delete</a></td>

$('.delete').on('click', function() { 
     console.log('try');
});

問題は、ドキュメントに td がいくつあるかということです。つまり、td'sdelete クラスが 10 個ある場合、trystrign も 10 回ログに記録されます。

イベントリスナーを間違って使用してon clickいますか、これは jquery の問題です。ありがとうございました。

4

1 に答える 1

3

will を1 回呼び出すと.on()、イベント ハンドラが 1 つだけ起動されます。

私見、あなたの過ちの最も可能性の高い説明は、実際に.on()複数回呼び出していることです-おそらく<td>要素を作成しているループ内ですか?

単一のハンドラー内で、DOM トラバーサルを使用して、クリックされた列または要素を特定し、それに応じて動作させることができます。たとえば、現在の行を削除したい場合は、次のように使用できます。

for (...) {
    // populate the table here
}

// handler will remove the row containing the clicked ".delete" link
$('.delete').on('click', function() {
    $(this).closest('tr').remove();
});

OPからの新しい情報に基づいて編集すると、問題は実際には、行が追加されるたびに同じハンドラーが何度も重複して再登録されることです。

この場合の最善の解決策は、個々の要素ではなく、テーブルに (1 回だけ)ハンドラーを配置するevent delegationです。

$('#mytable').on('click', '.delete', function() {
    // do your delete stuff here
});

.delete追加のパラメーターに注意してください.on- これは、テーブル内のどの特定の要素に関心があるかを jQuery に伝えます - クリックされた要素は として渡されthisます。

テーブルにデータが入力される前にこの呼び出しを行うことができ、.delete後で動的に追加されたものであっても、テーブル内で見つかったすべての要素に対して機能します。

于 2013-10-22T09:40:04.060 に答える