Good evening everyone..
first some primal informations:
all .js - Files are used as modules, some names of files/variables doesnt make sense, i changed them here to make it easier to read for you, dont bother that, i have a "main.js" which is the primary module, i have a "MenuEV.js" which includes only the class "MenuEV",
here is my problem:
there is a with the id="superWrapper". The content of superWrapper is determined by a method of MenuEV and is called MenuEV.setContent(). setContent() is called within "main.js" and the content is there. But without the EventListeners. Where is the problem?
i create HTML-Elements and give them EventListener´s within a method of MenuEV. This method returns the superWrapper.
Part of superWrapper´s content are some links with id="arrowLeft". I create superWrappers´s content by creating every Element with "document.createElement(blahblah)"
so this is what the Method setContent looks like:
//part of setContent() {
[...]
let superWrapper = document.createElement("div");
superWrapper.setAttribute("id" , "superWrapper");
let link1 = document.createElement("a");
link1.setAttribute("href" , "#");
link1.setAttribute("id" , "arrowLeft")
link1.innerHTML = "⇱";
link1.addEventListener("click" , this.swipeLeft());
superWrapper.insertAdjacentElement("afterbegin" , link1);
[...]
return superWrapper;
}
swipeLeft is just another method of MenuEV. It only contains a console.log to test, if sth happens(and no, it doesnt)
This is how setContent() is called within "main.js":
// part of main.js:
[...]
let evMenu = new MenuEV();
[...]
vRow.insertAdjacentElement("afterbegin" , evMenu.setContent());
So, the arrow(and any other created Element) actually appears, but why doesnt it have an EventListener?
EDIT: Here is a minimal reproducible example:
main.js:
[...]
evMenu = new MenuEV();
[...]
function setContentMainFrame() {
[...]
let button = document.getElementById("getOverview");
button.addEventListener("click" , () => {
[...]
vRow.insertAdjacentElement("afterbegin" , evMenu.setContent());
});
}
and now MenuEV.js:
[...]
export class MenuEV {
[...]
setContent() {
[...]
let superWrapper = document.createElement("div");
superWrapper.setAttribute("id" , "superWrapper");
let link1 = document.createElement("a");
link1.setAttribute("href" , "#");
link1.setAttribute("id" , "arrowLeft")
link1.innerHTML = "⇱";
link1.addEventListener("click" , this.swipeLeft());
superWrapper.insertAdjacentElement("afterbegin" , link1);
[...]
return superWrapper;
}
swipeLeft() {
console.log("Arrow Left was clicked on");
}
}