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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

jQuery

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

Q&A

解決済

1回答

3828閲覧

jQuery:タブ切り替えができない(CodePenにコードあります)

ksyunnnn

総合スコア60

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2017/05/30 06:45

###前提・実現したいこと

https://codepen.io/ksyunnnn/pen/bWPBay
このサンプルコードを動作させたいです。
2段目の日付タブの切り替え(Click)ごとに、表示するデータが切り替わるようにしたいです。

切り替えたい項目

  • Sales
  • Event at

現状、なぜか最初の一回のクリックだけ反応して切り替わります。。

利用ライブラリ
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

###発生している問題・エラーメッセージ

2回目以降の2段目の日付タブの切り替え(Click)イベントが反応しない

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

こちらで動作とコードが確認できます。
https://codepen.io/ksyunnnn/pen/bWPBay

※念のためコードも記載します。

index.html

1<div class="container card select"> 2 <select name="list"> 3 </select> 4</div> 5<div class="container card ul"> 6 <ul></ul> 7</div> 8<div class="container card table"> 9 <table> 10 <tbody> 11 <tr> 12 <th rowspan="2">Sales</th> 13 <td rowspan="2" class="sales">--</td> 14 <th>Title</th> 15 <td class="title">--</td> 16 </tr> 17 <tr> 18 <th>Event at</th> 19 <td class="event_at">--</td> 20 </tr> 21 </tbody> 22 </table> 23</div>

style.scss

1.container { 2 font-family:游ゴシック; 3 max-width:640px; 4 margin:0 auto; 5 padding:10px 10px; 6 font-size:14px; 7 a { 8 text-decoration: none; 9 } 10 &.select ,&.ul{ 11 min-height:0px; 12 } 13 li{ 14 display:inline; 15 padding:5px; 16 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); 17 &.active{ 18 border-bottom:1px solid gray; 19 } 20 &:hover{ 21 @extend .card; 22 } 23 } 24} 25.card { 26 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 27 transition: 0.3s; 28} 29th,td{ 30 width:200px; 31 text-align:center; 32} 33select { 34 height:30px; 35}

index.js

1var data = { 2 "events": [ 3 { 4 "id": "0001", 5 "title": "Oconomi party", 6 "at": "osaka", 7 "fee": "3000", 8 "status": "open", 9 "detail": "This is a party" 10 }, 11 { 12 "id": "0002", 13 "title": "Asakusa beer bash", 14 "at": "tokyo", 15 "fee": "5000", 16 "status": "open", 17 "detail": "This is a party" 18 }, 19 { 20 "id": "0003", 21 "title": "tebasaki carnival", 22 "at": "nagoya", 23 "fee": "2000", 24 "status": "closed", 25 "detail": "This is a party" 26 }, 27 { 28 "id": "0004", 29 "title": "Maiko dance", 30 "at": "kyoto", 31 "fee": "100000", 32 "status": "open", 33 "detail": "This is a party" 34 }, 35 { 36 "id": "0005", 37 "title": "Mozaic party", 38 "at": "hyogo", 39 "fee": "8000", 40 "status": "closed", 41 "detail": "This is a party" 42 } 43 ], 44 "series": [ 45 { 46 "id": "1001", 47 "sales": "60000", 48 "event_at": "2017/05/30", 49 "relating_with_events": "0001" 50 }, 51 { 52 "id": "1002", 53 "sales": "30000", 54 "event_at": "2017/04/12", 55 "relating_with_events": "0001" 56 }, 57 { 58 "id": "1003", 59 "sales": "15000", 60 "event_at": "2017/03/21", 61 "relating_with_events": "0001" 62 }, 63 { 64 "id": "1004", 65 "sales": "105000", 66 "event_at": "2017/05/30", 67 "relating_with_events": "0002" 68 }, 69 { 70 "id": "1005", 71 "sales": "100000", 72 "event_at": "2017/04/12", 73 "relating_with_events": "0002" 74 }, 75 { 76 "id": "1006", 77 "sales": "44000", 78 "event_at": "2017/03/21", 79 "relating_with_events": "0003" 80 }, 81 { 82 "id": "1007", 83 "sales": "1000000", 84 "event_at": "2017/05/30", 85 "relating_with_events": "0004" 86 }, 87 { 88 "id": "1008", 89 "sales": "192000", 90 "event_at": "2017/04/12", 91 "relating_with_events": "0005" 92 } 93 ] 94}; 95 96function getData(eventId,seriesId){ 97 // イベント情報 98 var events = data.events; 99 100 var eventTitle = data.events.filter(function(item, index){ 101 if (item.id == eventId) { 102 return true; 103 } 104 }); 105 // シリーズ情報 106 var relating_with_events = eventId; 107 var series = data.series.filter(function(item, index) { 108 if (item.relating_with_events == relating_with_events) { 109 return true; 110 } 111 }); 112 // 詳細情報 113 var seriesDetail = data.series.filter(function(item, index) { 114 if (item.relating_with_events == relating_with_events && item.id == seriesId) { 115 return true; 116 } 117 }); 118 119 seriesDetail[0].title = eventTitle[0].title; 120 121 return {events:events,series:series,detail:seriesDetail[0]}; 122} 123 124function draw( displayData, eventId, seriesId){ 125 126 // 既にあれば削除 127 if ($('div.select select[name=list] option').length) { 128 $('div.select select[name=list] option').remove(); 129 } 130 if ($('div.ul ul li').length) { 131 $('div.ul ul li').remove(); 132 } 133 134 var events = displayData.events; 135 $select = $('div.select select[name=list]'); 136 for (let k in events) { 137 $option = $('<option>', { 138 'value': events[k].id 139 }).text(events[k].title); 140 if (events[k].id=== eventId) $option.prop('selected', 'selected'); 141 $select.append($option); 142 } 143 144 var series = displayData.series; 145 $ul = $('div.ul ul'); 146 for (let k in series) { 147 $list = $('<li>',{'data-id':series[k].id}).text(series[k].event_at); 148 if (series[k].id=== seriesId) $list.toggleClass("active"); 149 $ul.append($list); 150 } 151 152 $('td.sales').text(displayData.detail.sales); 153 $('td.title').text(displayData.detail.title); 154 $('td.event_at').text(displayData.detail.event_at); 155 156} 157 158// 取得 & 描画 159draw(getData(eventId = "0001",seriesId = "1001"),eventId = "0001",seriesId = "1001"); 160 161$tab = $('div.ul ul li'); 162$select = $('div.select select[name=list]'); 163 164$tab.on('click',function(){ 165 var seriesId = $(this).attr('data-id'); 166 var eventId = $select.val(); 167 // 取得 & 描画 168 draw(getData(eventId, seriesId),eventId, seriesId); 169});

どなたか、ご教授くださいませm(__)m

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

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

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

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

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

guest

回答1

0

ベストアンサー

原因:
イベントを付与したNodeをremove後、再作成したあとにイベントを再付与していないため。
対処:
イベント捕捉を先祖要素で捕捉するようにする。

// 104行目 $tab.on('click',function(){ // body にイベントを補足させる。 $(document.body).on('click','div.ul ul li',function(){

投稿2017/05/30 06:52

編集2017/05/30 06:54
kanimaru

総合スコア1013

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

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

ksyunnnn

2017/05/30 07:04

ありがとうございます!解決できました! 原因と対処が初心者の自分にもわかりやすく、本当に助かりました。 removeして作り直すような場合には、イベント補足を明示的に行うべきなんですね。。! もっと勉強しますmmありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問