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

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>