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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1781閲覧

javascriptによってタグに追加されたクラスをイベントハンドラにするには?

kutu

総合スコア257

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/11/15 06:21

下記のようにコードを組みました

<p>タグの中にある<img>をクリックすると 「1」とアラートされます。 ディベロッパーツールで確認するとclassは確かに「remove」になるのですが、2回目以降の<img>クリックをしても「1」とアラートされます。

2回目は「2」とアラートされ、さらにclassが「add」に戻ることを期待しておりますが、うまくいきません。

お分かりになる方いらっしゃいますでしょうか?

<script> jQuery(function(){ jQuery('p img.add').on('click',function(){ alert(1); jQuery('p img').removeClass("add"); jQuery('p img').addClass("remove"); }); jQuery('p img.remove').on('click',function(){ alert(2); jQuery('p.send_repos_2 img').removeClass("remove"); jQuery('p.send_repos_2 img').addClass("add"); }); }); </script> <p><img src="ooo.jpg" class="add"></p>

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

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

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

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

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

guest

回答3

0

ベストアンサー

こういうことでしょうか?

JavaScript

1jQuery(function(){ 2 jQuery('p').on('click','img.add',function(){ 3 alert(1); 4 jQuery(this).removeClass("add"); 5 jQuery(this).addClass("remove"); 6 }); 7 8 jQuery('p').on('click','img.remove',function(){ 9 alert(2); 10 jQuery(this).removeClass("remove"); 11 jQuery(this).addClass("add"); 12 }); 13});

投稿2016/11/15 06:32

kei344

総合スコア69364

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

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

kutu

2016/11/15 06:42

おお、出来ました ありがとうございます!!
guest

0

現在存在するDOM要素に対してのトリガになります。

javaScript

1<script> 2jQuery(function(){ 3 jQuery(document).on('click', 'p img.add', function() { 4 alert(1); 5 jQuery('p img').removeClass("add"); 6 jQuery('p img').addClass("remove"); 7 }); 8 9 jQuery(document).on('click', 'p img.remove', function() { 10 alert(2); 11 jQuery('p.send_repos_2 img').removeClass("remove"); 12 jQuery('p.send_repos_2 img').addClass("add"); 13 }); 14}); 15</script>

投稿2016/11/15 06:29

mukkun

総合スコア882

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

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

kutu

2016/11/15 06:32

javascriptが認識しているDOMを更新するにはどうすればよいのでしょうか?
mukkun

2016/11/15 06:38

documentに対して貼っても良いですし、 kei344さんの回答みたいにpタグに貼っても動作します。
guest

0

一応切り替えの処理なのでこれで十分だと思います

HTML

1<script> 2$(function(){ 3 $('p img').filter('.add,.remove').on('click',function(){ 4 if($(this).hasClass('add')) alert(1); 5 if($(this).hasClass('remove')) alert(2); 6 $(this).toggleClass('add remove'); 7 }); 8}); 9</script> 10<p> 11<img class="noclass" alt="test"> <!--反応しない--> 12<img class="add" alt="test"> 13<img class="remove" alt="test"> 14<img class="add remove" alt="test"> <!--1回だけ反応する--> 15</p>

投稿2016/11/15 07:23

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問