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

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

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

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

jQuery

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

1363閲覧

jQueryのinviewプラグインがうまく動作しません

dydo

総合スコア8

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

jQuery

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2019/11/27 02:33

Node.js + express + ejs でアプリを制作しています。
jQueryでHTMLを追加したあとで、classによって動作を指定したいのですが、新しく追加されたHTMLにはinviewが反応しません。
なぜでしょうか?

よろしくお願いします。

ejs

1<!DOCTYPE html> 2<html> 3 <head> 4 <title><%= title %></title> 5 <link rel='stylesheet' href='/stylesheets/style.css' /> 6 <!-- jQuery --> 7 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 8 <!--画面表示された時の動作を指定するinviewプラグイン--> 9 <script src="./javascripts/jquery.inview.js" type="text/javascript"></script> 10 </head> 11 12 <body> 13 <p class="test">class="test"はinviewTestが反応します</p> 14 <input class="submit" type="button" value="クリックすると文字追加"> 15 <ul> 16 <p>追加したHTMLにはinviewTestが反応しません</p> 17 </ul> 18 19 <script> 20 //クリックしたらHTMLを追加 21 $('.submit').click(function () { 22 $('<p class="inviewTest">文字追加</p>').appendTo($('ul')); 23 }); 24 25 //最初からあるclassには反応します 26 $('.test').on('inview', function () { 27 console.log("こちらは表示されます"); 28 }); 29 30 //あとから追加したClassには反応しない? 31 $('.inviewTest').on('inview', function () { 32 console.log("表示されません"); 33 }); 34 </script> 35 36 </body> 37</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

要素を追加するときにイベントをつけてください

jQueryのonイベントは、JavaScriptの標準のイベント(clickなど)でしたら、後から追加した場合も動いてくれます。

しかし、inviewはjquery.inview.jsライブラリのカスタムイベント(このライブラリで作られた独自のイベント)なので、後から追加した場合は動いてくれません。

このような場合は appendTo する前にこれから追加したい要素のイベントを発行(つける)してから
追加すると動いてくれます。

デモを作ったので参考にしてください。(わかりやすいように少し編集しています)
https://codepen.io/mattari-panda/pen/pooXQoP?editors=1111

投稿2019/11/27 03:14

mattari_panda

総合スコア429

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

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

dydo

2019/11/27 03:22

ありがとうございます。解決しました。 とてもわかり易かったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問