質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

655閲覧

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

Qoo

総合スコア1249

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/18 22:53

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

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

javascript

1<td><button class='tr_content'>削除</button></td> 2 3$('.tr_content').click(function () { 4 alert("click"); 5 $(this).parent().parent().remove(); 6}); 7 8

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

javascript

1$('.tr_content').one("click", function (eo){ 2 alert("click"); 3 $(this).parent().parent().remove(); 4}); 5

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/08/18 22:57 編集

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

回答2

0

ベストアンサー

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

javascript

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

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

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

javascript

1for (var i=0;i<data.length;i++){ 2 var $td = $("<td><button class='tr_content'>削除</button></td>"); 3 $("table tr").append($td); 4 5 // ここで追加してしまうと、ループ回数分イベントが追加されることになる 6 $('.tr_content').click(function () { 7 alert("click"); 8 $(this).parent().parent().remove(); 9 }); 10}

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

javascript

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

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

投稿2017/08/18 23:26

zohnam

総合スコア1441

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2017/08/21 07:31

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

0

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

JavaScript

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

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

Re: Qoo さん

投稿2017/08/18 23:37

編集2017/08/18 23:38
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問