Home>
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>
-
Answer # 1
Related articles
- i want to add a column-by-column filter to a table created with bootgrid, a jquery plugin
- jquery plugin canvaspercentjs to achieve the percentage round cake effect
- jQuery plugin to achieve picture carousel special effects
- 2D bar chart effect drawn by jQuery plugin FusionCharts [with demo source code]
- jQuery plugin select2 uses ajax to efficiently query large data lists (searchable, pageable)
- jQuery plugin imgAreaSelect basic explanation
- jQuery plug-in ImgAreaSelect implements avatar upload preview and crop function
- jQuery Validate form validation plugin implementation code
- jQuery validata plugin implementation method
- Detailed usage of jQuery dateRangePicker plugin
- jQuery plugin uploadify to achieve ajax effect image upload
- Quickly master the use of jquery pagination plugin jqPaginator
- Simple use of jQuery Collapse110 folding plugin
- Detailed use of pietimer jQuery fan timer plugin
- JQuery plugin development tab making detailed explanation
- Detailed jquery plugin jqueryviewportjs learning to use
- Summary of jQuery plugin animsition
- The use of zTree jQuery tree plugin (example explanation)
- jQuery uses zTree plugin to implement draggable tree example
- jQuery plugin to implement file upload function (support drag and drop)
Related questions
- node.js : Export and Import does not work in Nodejs
- node.js : Close Express Server Correctly + Save File
- node.js : How to get the value of a mongodb collection without creating a schema?
- node.js : I want to use a db object for db.getCollection ('first'), but how do I get this db object?
- node.js : Error rendering NodeJS pages. Cannot set headers after they are sent to the client
- node.js : How do I set up HelmetJS correctly?
- html : Doesn't see my JS file on local server
- javascript : Problem: the server generates a new file only on restart (and should -on request)
- javascript : Error [ERR_STREAM_WRITE_AFTER_END]: write after end Express, send picture from server to client
- How to connect a node.js server to the Tor network with access via onion links?
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,
inview
is 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, before
appendTo
, issue (attach) the event of the element you want to addIt will move when added.
Please refer to the demo. (Slightly edited for clarity)
https://codepen.io/mattari-panda/pen/pooXQoP?editors=1111