Home>

jquery inview plugin does not work well

I'm making an app with Node.js + express + ejs.
I want to specify the action by class after adding HTML with jQuery, but inview does not respond to the newly added HTML.
Why?

Thank you.

<! DOCTYPE html>
<html>
  <head>
    <title><% = title%></title>
    <link rel = 'stylesheet' href = '/ stylesheets/style.css' />
    <!-jQuery->
    <script src = "https://code.jquery.com/jquery-3.4.1.min.js" integrity = "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo =" crossorigin = "anonymous"></script>
    <!-Inview plug-in that specifies the action when the screen is displayed->
    <script src = "./ javascripts/jquery.inview.js" type = "text/javascript"></script>
  </head>
  <body>
    <p>class = "test" reacts to inviewTest</p>
    <input type = "button" value = "Click to add text">
    <ul>
      <p>InviewTest does not respond to the added HTML</p>
    </ul>
      <script>
        // Click to add HTML
        $('. submit'). click (function () {
          $('<p>Add character</p>'). appendTo ($('ul'));
        });
        // react to a class from the beginning
          $('. test'). on ('inview', function () {
            console.log ("This is displayed");
          });
        // Does it react to the class added later?
        $('. inviewTest'). on ('inview', function () {
          console.log ("Not displayed");
        });
      </script>
  </body>
</html>
jquery node.js express ejs
  • Answer # 1

    Please add an event when adding an element

    If the jQuery on event is a standard JavaScript event (click etc.), it will move even if you add it later.

    However,inviewis a custom event of the jquery.inview.js library (an original event created by this library), so if you add it later, it won't work.

    In such a case, beforeappendTo, issue (attach) the event of the element you want to add
    It will move when added.

    Please refer to the demo. (Slightly edited for clarity)
    https://codepen.io/mattari-panda/pen/pooXQoP?editors=1111

Related articles