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

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

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

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

Q&A

解決済

2回答

3133閲覧

jQueryにおいて、テーブル内にセレクタを指定する方法。

Shinog

総合スコア99

jQuery

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

0グッド

0クリップ

投稿2015/10/06 14:29

編集2015/10/06 15:58

はじめまして。

現在、以下のようなカレンダーにおいて、
checkクラスがtd内に入っている日付があり、そこを押すとアラートが出る機能を実装しようと考えているのですが、上手くセレクタを指定することが出来ず困っています。

html

1<table summary="2015年10月のカレンダー" class="calendar month10"> 2<tbody> 3<tr> 4<th>SUN</th> 5・・・略・・・ 6</tr> 7<tr class="week1"> 8<td id="d20151001">1</td> //checkクラスがない 9・・・略・・・ 10</tr> 11<tr class="week2"> 12<td id="d20151004" class="check">4</td> //td内にcheckクラスがある 13・・・略・・・ 14</tr> 15<tr class="week3"> 16・・・略・・・ 17</tr> 18<tr class="week4"> 19・・・略・・・ 20</tr> 21</tbody></table>

※↑はJavascriptを用いて動的に生成したものです。(htmlコードはFirefoxのツールを活用して把握しました。)

javascript

1<script type="text/javascript"> 2$(function(){ 3 $('.check').click(function(){ 4 alert('特別な日です。'); 5 }); 6}); 7</script>

このような場合、上記のjQueryコードをどのように修正すればよいでしょうか?
何かお分かりの方は是非ともご教授のほどよろしくお願いします。

ちなみに以下のpタグでは、正常にアラートが作動しました。

html

1<p class="check">ここだよ。</p>

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

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

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

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

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

guest

回答2

0

カレンダーのhtmlコードについてなのですが、実はjavascriptを用いて動的に実装したものになります。

こういう情報は後出ししてはいけません。

javascript

1<script type="text/javascript"> 2$(function(){ 3 //ドキュメントのロード時に存在していない要素には適応されない 4 $('.check').click(function(){ 5 alert('特別な日です。'); 6 }); 7 //ドキュメントのロード時に存在していない要素でも適応される 8 $('.check').on('click', function(){ 9 alert('特別な日です。'); 10 }); 11}); 12</script>

投稿2015/10/06 16:01

編集2015/10/06 16:24
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Shinog

2015/10/07 02:30

ご回答ありがとうございます!! ご指摘頂き、ありがとうございます。以後気をつけていきます。 .on()の方で実装してみましたが、結果としてアラートは出ませんでした・・・
退会済みユーザー

退会済みユーザー

2015/10/07 02:59

現象(アラートが出ないという現象)を確認できる(こちらで実行して確認できる)ミニマムソースを提示してください。それがないと、回答は困難です。
guest

0

ベストアンサー

こんなコードを書いて実行してみましたが、class="check"を付けたもの(cccc以外)は全て問題なくクリックイベントが発生していました。(win7 chrome45)
「デベロッパーツール」のconsoleなどで実行ログを確認すると、関係ない別の箇所でエラーが出てたりはしませんか?

html

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 2<script type="text/javascript"> 3$(function(){ 4 $('.check').click(function(){ 5 alert('特別な日です。'); 6 }); 7}); 8</script> 9 10<p class="check">aaaa</p> 11<table summary="2015年10月のカレンダー" class="calendar month10"> 12<tbody> 13 <tr class="check"><td>bbbb</td></tr> 14 <tr><td>cccc</td></tr> 15 <tr class="week3"><td id="abc" class="check">dddd</td></tr> 16</tbody> 17</table>

投稿2015/10/06 15:35

編集2015/10/06 15:36
hirohiro

総合スコア2068

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

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

Shinog

2015/10/06 15:49

ご回答ありがとうございます! カレンダーのhtmlコードについてなのですが、実はjavascriptを用いて動的に実装したものになります。 Chromeのディベロッパーツールで確認した際、コードにエラーはなかったのでそこらへんが原因になって来ますかね?
hirohiro

2015/10/06 16:49

なるほど、それでしたらKosuke_Shibuyaさんが指摘されているとおり、.click()では動的に追加した要素にイベント追加できないんです。 table要素であるかどうかは関係ないので、.on()で書けば問題ないと思います。
Shinog

2015/10/07 02:27

返信ありがとうございます!! そんな事情があったのですね、一つ勉強になりました。 .on()で書いてみましたが、アラートは出ませんでした(涙)
hirohiro

2015/10/07 03:36 編集

$('.check').on('click', function(){alert('特別な日です。');}); これだと、追加後に実行しないと駄目かもしれません。 $(document).on('click', '.check', function(){alert('特別な日です。');}); こういう風に書いたら動作しますか? うろ覚えですが確か $(document).on(イベント, 発火要素, 関数)  //documentに記憶されて、動的追加分も含め配下の全発火要素が対象 $(添付対象要素).on(イベント, 発火要素, 関数)  //添付対象要素に記憶されて、動的追加分も含め配下の全発火要素が対象 $(添付対象要素).on(イベント, 関数)  //添付対象要素に記憶されて、自身対象 こんな感じだったような
Shinog

2015/10/08 11:28

最後の最後までお付き合い下さり、本当にありがとうございます!! $(document).on('click', '.check', function(){alert('特別な日です。');}); に変更することで、無事アラートが実行されました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問