クラス指定で一度だけ実行したい

Question

例えばテーブルタグのボタンアクションなどで、
クラス指定をした場合、一度だけ処理を実行したいのですが、
うまくいきません。

複数の行があるテーブルで下記を実行すると、イベントが行数分発生してしまいます。

<td><button class='tr_content'>削除</button></td>

$('.tr_content').click(function () {
  alert("click");
 $(this).parent().parent().remove();
});

いろいろ調べて、oneという処理でやってみたのですが
同じく複数回のイベントが発生してしまいます

$('.tr_content').one("click", function (eo){
  alert("click");
  $(this).parent().parent().remove();
});

何か良い方法はないでしょうか

Comments

[s8_chu]

「イベントが行数分発生してしまう」ということがよくわからないので、可能ならばHTMLの構造をもう少し詳しく追記していただけませんか？

Answer 1

まず、必要な前提知識です。
わかりにくいかもしれませんが、$('.tr_content').click(function () {～});というイベント追加処理をしたら、その時点で.tr_contentというクラスを持つ要素全てにイベントが追加されます。
それでいて、実行時のthisは、実際にクリックされた要素1個だけを指します。
ですので、

$('.tr_content').click(function () {
  alert("click");
 $(this).parent().parent().remove();
});

というイベント追加処理は、スクリプト内で1度実行すれば、すべての.tr_contentに設定できるということです。

また、ここまで書いた通りイベント追加処理ですので、複数回追加すると複数回実行されることになります。
それを踏まえてQooさんがなにをミスっているのかエスパーすると、forループでtable内にtdを作成している時、一緒にイベント登録しているなどが考えられます。

for (var i=0;i<data.length;i++){
	var $td = $("<td><button class='tr_content'>削除</button></td>");
	$("table tr").append($td);

	// ここで追加してしまうと、ループ回数分イベントが追加されることになる
	$('.tr_content').click(function () {
	  alert("click");
	 $(this).parent().parent().remove();
	});
}

これを実行すると、1行目はループ回数分イベントが発生します。1番下の行なら1回だけですが。
こういうわかりやすい大量追加処理を書いたつもりがないのでしたら、イベント追加処理の前にalertを出してみてください。

alert("ここで追加");
$('.tr_content').click(function () {

これで、どこで何回も追加しているのかはっきりわかることでしょう。

Comments

[Qoo]

丁寧な説明ありがとうございます！
ボタン処理で動的に行を追加する処理を行っており、
行追加の都度、イベントを追加していたので、
すでに存在する行に対してもさらにイベントが追加された状態になっておりました。
おかげさまで問題も解決し、知識も深めることができました！
ありがとうございました！

Answer 2

$('.tr_content').click() によって、複数の <td class="tr_content'"> に click イベントハンドラが設置される状況は理解できますが、それの何が問題なのかが示されてないので、直接的なアドバイスが出来ません。
とりあえず、table要素ノード単位でイベントハンドラを設置すれば、table要素ノードの数にイベントハンドラ数を抑える事は可能です。

jQuery('table:has( .tr_content)').on('click', '.tr_content', function (event) {
  alert(event.type);
  jQuery(event.currentTarget.parentNode).remove();
});

しかしながら、$('.tr_content') にイベントハンドラを設置したとしても、メモリ消費量が上記コードよりも多くなること以外のデメリットを私は想像できません。
コードしては上記コードの方が優れていますし、このコードで解決可能な可能性はあります。
が、実際のところは何が直接的な障害になっているかを理解しておく事が Qoo さん今後の為に良いと私は思います。
現象を再現可能な最小限のコードを開示し、原因を探る事を推奨します。

Re: Qoo さん