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

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

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

Lodashは、JavaScriptのユーティリティライブラリ。Underscoreの派生ライブラリで、配列・オブジェクトの操作に便利です。また、コードの可読性も高めることができます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1252閲覧

jQueryでhtmlに追加したラジオボタンが作動しない

toramo

総合スコア14

Lodash

Lodashは、JavaScriptのユーティリティライブラリ。Underscoreの派生ライブラリで、配列・オブジェクトの操作に便利です。また、コードの可読性も高めることができます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/12/01 16:36

いつもお世話になっております。
前回質問した内容の続きになりますが、教えていただきたく思います。

前提・実現したいこと

jquery(とLodash)を使用して、配列からデータを絞り込んで表示させようとしています。
イメージ図は下記になります。
イメージ説明

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

前回の質問で頂いた回答を元に上の図の①の「年代→名前への絞り込み」はクリアできたのですが、
同じように絞り込みの式を書けば表示できると思った②が作動しません。

該当のソースコード

jQuery

1(function() { 2 var allList = [ 3  { 4  age:"20", 5  name:"田中太郎", 6  chara:["A","B","D","A","C","B","B"], 7  skill:["炭酸飲料の一気飲み","グリーンピースの早食い","特技3","特技4","特技5","特技6","特技7"], 8  desc:["調子がいい時は2リットルを30秒以内に飲める。","一度喉に詰まらせてから全盛期の勢いを失くした","説明3","説明4","説明5","説明6","説明7"], 9  { 10  age:"20", 11  name:"鈴木花子", 12【以下、ずっと続きます】 13 ]; 14 15 function render() { 16 var list = _(allList).value(); 17 $('.productArea').html(productTemplate({list: list})); 18 }; 19 20 $('[name="age"]:radio').on('change',function(){ 21 var l2=allList.filter(function(x){ 22 return x.name==$('[name=name]:checked').val(); 23 }).map(function(x){ 24 return x.name; 25 }); 26 var html = ''; 27 l2.forEach(function (name) { 28 html += '<label><input type="radio" name="name" value="' + name + '"><span>' + name + '</span></label>'; 29 }); 30 document.querySelector('#filter_name').innerHTML = html; 31 }); 32 33 $(document).on('change','[name="name"]:radio',function(){ 34 var l2=allList.filter(function(x){ 35 return x.name==$('[name=name]:checked').val(); 36 }).map(function(x){ 37 return x.chara; 38 }); 39 var html = ''; 40 l2.forEach(function (chara) { 41 html += '<li class="productTitle"><span>' + chara + '</span></li>'; 42 }); 43 document.querySelector('#chara').innerHTML = html; 44 }); 45});

html

1<div id="filter_age"> 2 <label><input type="radio" name="age" value="20"><span>20代</span></label> | 3 <label><input type="radio" name="age" value="30"><span>30代</span></label> | 4 <label><input type="radio" name="age" value="40"><span>40代</span></label> | 5 <label><input type="radio" name="age" value="50"><span>50代</span></label> 6 7</div> 8 9<div class="productArea"> 10<script type="text/template" id="productTemplate"> 11 <div id="filter_name"></div> 12  <div id="info"> 13    <div class="product"> 14 <ul id="chara"></ul> 15    </div> 16    <div id="right"> 17     <table> 18     【テーブル(今回は省略)】 19     </table> 20    </div> 21  </div> 22</script> 23</div>

試したこと

最初は2つ目のラジオボタンを動かす関数を

jquery

1 $('[name="name"]:radio').on('change',function(){

と1つ目の関数とまったく同じようにしていましたが、検索したところ
「追加した要素に対してイベントを設定するにはここの記述を変えれば動作する」
と書いてあったので見よう見まねで変更しました。
しかしここを変えても動作しませんでした。

何度も質問して申し訳ありません。
解決方法が分かる方がいらっしゃいましたら、回答をよろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

検索したところ

「追加した要素に対してイベントを設定するにはここの記述を変えれば動作する」
と書いてあったので見よう見まねで変更しました。
しかしここを変えても動作しませんでした。

何を参考にどのように変えて動作しなかったときに何が起きたの書かれてないので
どの段階からアドバイスすべきか分からないのですが動的要素についてはDocumentからイベントを拾うようにすると良いです。

投稿2018/12/01 19:46

編集2018/12/01 19:50
m.ts10806

総合スコア80765

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

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

toramo

2018/12/02 04:48

回答ありがとうございます。 いつも説明不足で申し訳ないのですが、 イメージ図上の「田中太郎」をクリックすると左部分に「ABDACBB」が表示されるようにしたいのですが 実際は田中太郎をクリックしても表示されない、何も起こらないという事です。 具体的にはhtmlの<ul id="chara"></ul>に<li>として絞り込んだ特性(chara)を追加するようにしたいので、 jQueryの一番下の関数を書きました。 一つ上の関数で正しく作動している「年代をクリックすると名前を表示する」のほぼ丸コピーなので 同じように動作してもおかしくないと考えたのですが、 実際名前部分をクリックした後にソースを確認しても、<ul>部分には何の追加もされていません。 読解力不足で申し訳ないのですが、教えていただいたリンク先のページも読ませていただきましたが 私が「試したこと」に記述した内容と同じように思われます。 $(document).on('change','[name="name"]:radio',function(){ … と変更して書いているのですが、それでも動作しなかったため 関数の何かの記述が間違っているのだとは思うのですが、どう変更すればきちんと動くのかが分からないのです…。
m.ts10806

2018/12/02 04:51

なるほど。では「試したこと」に参考先・実際のコードを記載してください。 私の回答が無駄足になってしまってますので。
kei344

2018/12/02 05:14

To: mts10806さん 提示されたコードに元々ありますよ。 $(document).on('change','[name="name"]:radio',function(){
m.ts10806

2018/12/02 05:33

kei344さん ありがとうございます。見落としてました。
guest

0

自己解決

すみません、真摯に回答していただいたのに大変申し訳ないのですが
もう一度一つ目の関数をコピーして二つ目を質問内容と同じように
(一行目も$(document).on('change','[name="title"]:radio',function(){ として)
書き直してみたところ、無事に作動しました。
自分では何度見直しても質問内容に記載したものと今の内容のどこが違っているのか分からないのですが、
恐らく要素の書き換えをしていた最中に何らかのスペルミスをしたのだと思われます。

下らないことでお手数をおかけしてしまい大変申し訳ありませんでした。
また困った際には質問させていただくかと思いますがどうぞよろしくお願いします。

投稿2018/12/02 15:33

toramo

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問