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

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

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

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

Q&A

解決済

3回答

1195閲覧

ajaxを利用して読み込んだWebページの一部内でJavaScriptイベント発火

cattail

総合スコア11

JavaScript

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

0グッド

0クリップ

投稿2019/06/02 13:01

前提・実現したいこと

ajaxを利用して読み込んだWebページの一部内でJavaScriptイベントを発火させたいと考えています。

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

jQueryを使う場合であれば、ajaxで読み込んだ部分でも、

javascript

1$(document).on('click', 'selector', function(){ 2 //挙動 3});

のようにすればイベントを発生させることができます。
しかし、jQueryを使わない場合にはどのように書いたら良いのでしょうか。

javascript

1var selector = document.querySelector('selector'); 2selector.addEventListener('click', function() { 3 //挙動 4});

では動作しませんでした。
そもそも、セレクタのほうが取れていないのかもしれませんが、いずれにせよ記述法が分からずにおります。

試したこと

上記のコードと、ネット検索、teratail内検索。
似た問題はあったのですが、jQuery関連で、上記の疑問とは異なる内容のようでした。
なにとぞご教示のほどお願い申し上げます。

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

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

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

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

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

guest

回答3

0

documentに対してaddEventListenerでチェックします

javascript

1<script> 2document.addEventListener('click',function(e){ 3 if([].indexOf.call(document.querySelectorAll(".fuga"),e.target)>=0){ 4 console.log(e.target.textContent); 5 }; 6}); 7window.addEventListener('DOMContentLoaded', function(e){ 8 //以下動的にfugaクラスのspanをつくる 9 var fuga=document.createElement('span'); 10 fuga.classList.add("fuga"); 11 fuga.textContent="new fuga"; 12 document.querySelector("#hoge").appendChild(fuga); 13}); 14</script> 15 16<div id="hoge"></div> 17<div class="fuga">org fuga</div> 18

投稿2019/06/03 02:51

yambejp

総合スコア114572

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

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

cattail

2019/06/03 07:14

ご回答ありがとうございます。 クラスが複数あることについては見落としておりました。 ajax読み込み部の操作に必要な部分は全てDOMを動的に生成すればよかったのですね。 生成部分は、windowやdocumentのaddEventListener、DOMContentLoadedで動作しなかったので、ajaxで読み込んだあとのコールバックで生成して対応したら動作させることができました。 同じクラスを持つUIが複数ある場合にどうするか(ページの上と下に同じUIがあるなど)、ページ内のその他のUIにも同様に対応するなど作り込みはまだまだ必要そうですが、原理がわかったことで先が見えてきました。
guest

0

ベストアンサー

Event.target でイベントが起こった要素を特定できるので、それを利用すればできます。

【jQueryを使わずjavascriptだけで書き直した際の記法メモ - Qiita】
https://qiita.com/moriyaman/items/3b3f7878f8ecc2b76372#liveon-event

【Event.target - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Event/target

投稿2019/06/02 13:19

kei344

総合スコア69364

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

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

cattail

2019/06/03 03:02

ご回答ありがとうございます。 お教えいただいたURLに記載されている中の、 document.addEventListener('click', function (e) { if (e.target.className ==='hoge') { // function } }); とするやり方で動作できました。 全てのクリックを見て、それが何かを判別する必要があるのですね。
yambejp

2019/06/03 03:04 編集

> e.target.className ==='hoge' HTML要素についているclassは一つだとは限らないのでこの書き方はNG "hoge fuga"だとヒットしません。
guest

0

selector.addEventListener('click',

1 //挙動 2});``` 3 4の、やり方でも問題なさそうに思えます。 5 6以下の部分。 7`var selector = document.querySelector('selector');` 8classを取得する時には `document.querySelector('.selector');` 9と、classに `.` をつけて上げる必要があります!

投稿2019/06/02 13:22

t_kusakabe74

総合スコア549

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

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

cattail

2019/06/03 02:59

ご回答ありがとうございます。 selectorのところは、IDの場合もあるのでそのように書いてしまいましたが、実際には、クラスの際には.をつけておりました。 再確認しましたが、やはり上記の書き方では動作しませんでした。 別の方法で解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問