jQueryでクラスを追加したのにクリックイベントが発生しない

###現状
現在box1のクラス名が付いたdivのみが一つあります。このdivをクリックするとbox1のクラス名が削除され、box2のクラス名が追加され、背景色が赤から緑に変更されます。

###発生している問題
box2のクラス名を追加する所まではできたのですが、このbox2のクラス名が付いたdivをクリックするとbox2のクラス名が削除され、box3のクラス名が追加され、背景色が緑から黄色に変更させたいのですが、クリックしても無反応です。

###試したこと
コンソールに出力させたりしてみたり、もしかしたらjsやjQueryの読み込み順かなと思い、</body>の直前で読み込ませさせたのですがダメでした。

該当コードをjsfiddleにアップしました。
ご活用していただければ幸いです。
https://jsfiddle.net/ululami/x9he9939/
よろしくお願いいたします。

###該当のソースコード

javascript
1$(function(){
2  $('.box1').on('click',function(){
3    $('.box1').removeClass().addClass('box2');
4  })
5  
6  $('.box2').on('click',function(){
7    $('.box2').removeClass().addClass('box3');
8  })
9})

css
1div{
2  width: 100px;
3  height: 100px;
4}
5
6.box1{
7  background: red;
8}
9
10.box2{
11  background: green;
12}
13
14.box3{
15  background: yellow;
16}

html
1<div class="box1"></div>

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery 3.2.1

行動規範の内容に同意します

回答2件

ベストアンサー

こんなかんじでどうでしょう。

JavaScript
1$( function() {
2	$( 'body' ).on( 'click', '.box1', function() {
3		$( this ).removeClass( 'box1' ).addClass( 'box2' );
4	} );
5	$( 'body' ).on( 'click', '.box2', function() {
6		$( this ).removeClass( 'box2' ).addClass( 'box3' );
7	} );
8} );
9```**動くサンプル：**[https://jsfiddle.net/vvy1kmtu/](https://jsfiddle.net/vvy1kmtu/)
10
11
12---
13
14**追記：**
15
16せっかくなので box1 - box7 を繰り返すのも作ってみた。
17
18```JavaScript
19$( function() {
20	$( 'body' ).on( 'click', function( e ) {
21		var box = e.target.className.match( /.*?(box)(\d).*?/ ); // ちなみにクラスが box1 box3 とか指定されている場合はうまく動かない
22		if ( box ) $( e.target ).removeClass( box[ 1 ] + box[ 2 ] ).addClass( box[ 1 ] + ( box[ 2 ] % 7 + 1 ) )
23	} );
24} );
25```**動くサンプル：**[https://jsfiddle.net/vvy1kmtu/1/](https://jsfiddle.net/vvy1kmtu/1/)

投稿2017/10/04 13:26

編集2017/10/04 15:32

kei344

総合スコア69398

owl

2017/10/04 14:15

ご回答ありがとうございます。後から追加したクラス名にもイベントを実行させるには、 'click'の後にクラス名を入れる必要があるのですね。調べてみた所もとはliveメソッドのものを統合したという事ですので、非常に勉強になりました。本当にありがとうございます。

namnium1125

2017/10/04 17:28

7で割ればよかったんですね。また勉強になりましたm(_ _)m こんなに短く書けるとは!自分も頑張ろうと思います。

行動規範の内容に同意します

javascript
1$(function(){
2  $('.box1').on('click',function(){
3    $('.box1').removeClass().addClass('box2');
4    $('.box2').on('click',function(){
5      $('.box2').removeClass().addClass('box3');
6    });
7  });
8});

これでとりあえず
.box1->.box2->.box3となります。

追記

javascript
1$(function(){
2  $('.box1').click(function(){
3    changeBoxNum(1);
4  });
5});
6
7function changeBoxNum(n){
8  $('.box'+n).off("click");
9  $('.box'+n).removeClass().addClass('box'+(n+1));
10  $('.box'+(n+1)).click(function(){
11    changeBoxNum(n+1);
12  });
13}

これで無制限に変更できます。

jsfiddle
※このデモでは7までくると1に戻るようになっています。

追記2

今までの話を踏まえて全体的に作り直してみました。

javascript
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>boxN</title>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7<style>
8.bx {
9  width: 100px;
10  height: 100px;
11  margin: 10px;
12}
13
14.wrapper{
15  display: -webkit-box;
16  display: -moz-box;
17}
18
19.box1{
20  background: red;
21}
22
23.box2{
24  background: orange;
25}
26
27.box3{
28  background: yellow;
29}
30
31.box4{
32  background: green;
33}
34
35.box5{
36  background: aqua;
37}
38
39.box6{
40  background: blue;
41}
42
43.box7{
44  background: purple;
45}
46</style>
47<script>
48$(function(){
49  // 初期化 全ての.bxにイベント付与
50  // click.chn -> changeBoxNumに関するclickイベントであることを明記 意味は無いかも。。(^ ^;
51  $('.bx').one('click.chn',function(e){
52    var clsNames = $(e.target).attr('class').split(' ');
53    var n = 1;
54    clsNames.forEach(function(val,ind,arr){
55      if(val.indexOf('box') != -1) n = parseInt(val.split('box')[1]);
56    });
57    changeBoxNum(n,e.target);
58  });
59});
60
61function changeBoxNum(n,et){
62	if(n<7){
63    $(et).removeClass('box'+n).addClass('box'+(n+1));
64    $(et).one('click.chn',function(e){
65      changeBoxNum(n+1,e.target);
66    });
67  }else{
68    $(et).removeClass('box7').addClass('box1');
69    $(et).one('click.chn',function(e){
70      changeBoxNum(1,e.target);
71    });
72  }
73}
74</script>
75</head>
76<body>
77<div class="wrapper">
78  <div class="bx box1"></div>
79  <div class="bx box2"></div>
80  <div class="bx box3"></div>
81  <div class="bx box4"></div>
82  <div class="bx box5"></div>
83  <div class="bx box6"></div>
84  <div class="bx box7"></div>
85</div>
86<div class="wrapper">
87  <div class="bx box1"></div>
88  <div class="bx box2"></div>
89  <div class="bx box3"></div>
90  <div class="bx box4"></div>
91  <div class="bx box5"></div>
92  <div class="bx box6"></div>
93  <div class="bx box7"></div>
94</div>
95<div class="wrapper">
96  <div class="bx box1"></div>
97  <div class="bx box2"></div>
98  <div class="bx box3"></div>
99  <div class="bx box4"></div>
100  <div class="bx box5"></div>
101  <div class="bx box6"></div>
102  <div class="bx box7"></div>
103</div>
104</body>
105</html>

jsfiddle

これで互いに影響を及ぼすことは無いはずです。

投稿2017/10/04 13:19

編集2017/10/04 15:15

namnium1125

総合スコア2043

kei344

2017/10/04 13:39

追記のコードについて、divに重複してイベントが設定されていくのは想定されている挙動でしょうか？

namnium1125

2017/10/04 13:41

ご指摘ありがとうございます。直してみます。

namnium1125

2017/10/04 13:56

`$('.box'+n).off("click");`を加えたのですがこれだけで大丈夫でしょうか? これを書き加えるくらいならkei344様のコードのようにあらかじめbodyに有限個分つけた方がいいですね(^ ^;

kei344

2017/10/04 14:15 編集

.one() にすると少しすっきりしそうな気がします。【.one() | jQuery API Documentation】 https://api.jquery.com/one/ .off() を使うなら、名前空間を使っておけば「全クリックイベント」を削除せずに消せると思います。.removeClass() についても、もし最初に他のクラスが存在する場合、それごと消してしまう恐れがあります。（そんな要件書いていないのでどっちでもいいんですが）【jQuery.fn.onに名前空間をつけることができる - Qiita】 https://qiita.com/yuku_t/items/89044987d45ec58ea7c5 関数化するのは良いですね。

owl

2017/10/04 14:18

ご回答ありがとうございます。 box2のクリックイベントをbox1のクリックイベントの中に入れると、ちゃんと動作するんですね。私のやり方だと、生成されたクラス名には反応しないということなのですね。また新たに関数を作って実行させるやり方も非常に勉強になりました。本当にありがとうございます。

namnium1125

2017/10/04 15:10 編集

kei344様いろいろと教えていただきありがとうございました!とても勉強になりました。m(_ _)m 教えていただいたことを元に改めてコードを書いてみました。少し不安かも(^ ^; owl様以下、私なりの今回の総括を書いてみます。すでに理解していらっしゃるかもしれませんが(^ ^; 今回の問題の根本は「`$('.box2').on('click',func);`が処理される時に`div`要素に'.box2'がついていないため、この時点で`div`要素にイベントがつかなかった」ということです。その場合の解決策がそれぞれ(ちょっと不正確かもしれませんが) 私 -> '.box2'がつく時にイベントを付ける kei344様 -> そもそも'body'にイベントを付けるという方法でした。イベントはクラスにつくのではなく、要素につくのだということが鍵だったわけですね。

owl

2017/10/05 06:12

わざわざわかりやすくまとめていただきありがとうございます。とても参考になりました。まだまだ自分にはjQueryのことがわかっていないということが痛感しました。本当にありがとうございます。

行動規範の内容に同意します

あなたの回答