JS Plain: elements dont have an EvenListener, when added with "insertAdjacentElement"

Viewed 22

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");
}
}
0 Answers
Related