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

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

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

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

jQuery

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

Q&A

解決済

1回答

7672閲覧

動的に生成した要素へのイベント

SugiuraY

総合スコア317

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/10/16 15:02

編集2017/10/16 15:30

本当に申し訳ございません。
昨日関連する質問をさせていただき、下記のようにtargetのid情報を拾えば動的に生成した要素にもイベントを設定できると思ったのですが、delete後にファイルをアップロードしても、
console.log("hello");が発生いたしません。
どの点に問題があるのでしょうか。。

HTML

1<html> 2 3<head> 4 <meta charset="utf-8"> 5 <title>sample</title> 6 <link rel="stylesheet" type="text/css" href="BB.css"> 7 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 8 9 10</head> 11<body> 12<span id="wrap"> 13 <input id="filing" type="file" name="" value=""> 14</span> 15 16<button type="button" name="button" id="delete" style="border-style: none;">delete</button> 17 18 19<script type="text/javascript"> 20document.getElementById('filing').addEventListener('change', function (evt) { 21if (evt.target.id==="filing") { 22console.log("hello"); 23} 24}); 25 26 27 28$(function(){ 29$('#delete').on('click',function(){ 30$('#filing').remove(); 31$('#wrap').append('<input id="filing" type="file" name="" value="">'); 32}) 33}) 34</script> 35</body> 36 37</html>

[追記]

HTML

1<button id="btn_1">btn</button> 2 3<script type="text/javascript"> 4function adding() { 5var elm_add = document.createElement('button'); 6elm_add.id = "hoge"; 7elm_add.textContent='btn added'; 8var objBody = document.getElementsByTagName("body").item(0); 9objBody.appendChild(elm_add); 10} 11var elm = document.getElementById("btn_1"); 12elm.addEventListener("click", adding, false); 13 14</script> 15<script type="text/javascript"> 16// var elm_2 = document.getElementById("hoge"); 17document.addEventListener("click", function(e){ 18console.log(e); 19if (e.target.id==='hoge') { 20alert('it works! congraturations!!') 21} 22}); 23</script> 24</body>

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

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

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

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

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

guest

回答1

0

ベストアンサー

html

1<button type="button" name="button" id="delete" style="border-style: none;">delete</button>

これをAとします。

javascript

1$('#wrap').append('<input id="filing" type="file" name="" value="">');

で追加された <input id="filing" type="file" name="" value=""> をBとします。

javascript

1document.getElementById('filing').addEventListener('change', function (evt) { 2if (evt.target.id==="filing") { 3console.log("hello"); 4}

でchange イベントが設定されるのは、このコードが実行されるときに存在しているAにイベントが設定されます。
Bはこの時点で存在しないので、設定されません。

javascript

1$(function(){ 2$('#delete').on('click',function(){ 3$('#filing').remove(); 4$('#wrap').append('<input id="filing" type="file" name="" value="">'); 5}) 6})

は、document.getElementById('filing').addEventListenerが実行された後に実行されますから、changeイベントが設定されたinputは削除(remove)されます。

appendされたinputBにはchangeイベントを追加するコードdocument.getElementById('filing').addEventListenerは実行されないため、changeイベントは追加されません。

投稿2017/10/16 15:14

編集2017/10/16 15:15
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

SugiuraY

2017/10/16 15:38

夜分にコメント誠にありがとうございます。 もともとあるイベントを付した要素はromoveとともに削除され、新たな要素Bには何も設定されないため実行されないということかと思います。 これ自体は理解に至らないことはないのですが、 この点、昨晩質問させて、解決したコードを加筆させていただいたのですが、hoge要素が生成される前に addEventListener("click", function(e){...は設定していないのに(後から設定しているのに)動的に生成した要素に対しても適切に動作致します。 これはつまり、クリックイベントのたびに、JSはclickのたびにブラウザの状況を常に把握し、ckickイベントが実行された時に該当するid(例ではhoge)を捉えることができればaddEventListnerが動作すると考えておりました。 2つおんコードに大きな違いがあるとは理解できなかったのですが、どこかに決定的な誤認識があるのでしょうか。 度々申し訳ございませんが、よろしくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2017/10/16 15:42 編集

document.addEventListener("click", function(e){ <ーここよく見て。 click イベントはdocumentに対して付いています。
SugiuraY

2017/10/16 15:48

コメント有難うございます。 昨晩、解決して導きだした、類似のコードです。動的に生成した要素でイベントを設定するという点で共通と考えています。 追記したコードでも、生成前の時点で、すでに後者のaddEventlistenerが実行されているため、仰るように、動作しないと思いきや動作します。つまり生成した要素をクリックすると処理が実行されます。 これと、今回の質問のコードに本質的な相違点はないと思ったので、比較で提示させて頂きました。
SugiuraY

2017/10/16 16:01

今、状況が理解できました。親要素に設定したいイベントだからですね。 最後にですが、常に生成前も後も#filing要素だけchangeした場合にイベントを発生させることは可能なんでしょうか? このままでは、他の要素がchangeしても、イベントが発火してしまうためです。もちろん実際にはコードのように条件分岐で特定のid時のみにしていますが、これが一般的なのか、他に生成した要素にイベントを加える方法が一般的なのか、わからなかったため、ご質問させて下さい。 何卒、宜しくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2017/10/16 16:03 編集

まず気になる点を。 Pure JavaScript と jQuery 記法が混在していますが、明確に区別はできていますか? 一般的な記述方法が知りたいのでしたら、一般的には混在させません。
SugiuraY

2017/10/16 16:09

失礼しました。pureです。 もしかしたらですが、deleteのイベント時に要素をapendするだけではなく、イベントも設定してあげれば良いということに、、
退会済みユーザー

退会済みユーザー

2017/10/16 16:11

聞く前に、実際に書いて試して見てください。技術をつけるには実際に手を動かすことです。
SugiuraY

2017/10/16 16:25

ご指導ありがとうございます。 想像した通り、不細工ながら下記のコードで動作を確認することができました! <script type="text/javascript"> document.getElementById('filing').addEventListener('change',function(evt){ console.log("hello_1"); }) document.getElementById('delete').addEventListener('click',function(){ document.getElementById('wrap').innerHTML='<input id="filing" type="file" name="" value="">'; document.getElementById('filing').addEventListener('change',function(evt){ if (evt.target.id==="filing") { console.log("hello_2"); } }) }) </script>
SugiuraY

2017/10/16 16:26

夜遅くまでおつきあい頂き本当にありがとうございました。 改めまして、心から御礼を申し上げます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問