Website On local network

I am a noob to this world of development and would like community’s insight on my problem.

If I get some data from the database using AJAX, php in a separate element, I am no longer able to access those elements using my JavaScript file that is parsed before that element.
For eg.:- I have attached a file and the browser has parsed the same.
Now, this script file contains behavior for some html

with class ‘X’. Now, the elements of class ‘X’ that were there while the document was parsed, show the defined behavior. Now, If I click a button and some more elements of class ‘X’ appear with data from a database using php and AJAX. [THE PROBLEM PART] These new elements will not adhere to the defined behavior.

I believe, the reason for the same is that, the JavaScript was defined earlier then, these elements were created.

I solved the same, by appending again a file that contains the same behavior as earlier and calling this script file after those elements are appended.

Now, I would like to know a better version for the same.


So, I found the answer for my question. The thing is, when I used jQuery Selectors I got something similar to a Non-Live Node List. Now, this Non-Live was the root behind the problem as, it made the collection of the elements of class “X” static and hence, when I made new elements of class “X” using AJAX, there were not recognized and I had to attach my JavaScript file again so every time I appended a group of new elements.

So, my structure was like this: scriptFile for normal elements.
and secondScriptFile for elements that get appended using AJAX.

Yes, I had to use 2 separate files containing the same functionality and load them at different times.

Now that I am learning JavaScript properly (Vanilla Flavored), I found out that .getElementsByClass() method and other .getElement… methods return a LIVE HTMLCollection so that means, my collection should get updated after I append new elements so, I probably won’t have to use different script files.

I sort of have not tried the same on the project as, I would have to convert my code relying on jQuery to Vanilla JS.

I will do it soon after I discuss the same with my friend.

Here is the video of the project I am taking about.

Nikhil Seth