Why does the eventListener just works on the first occasion?
So from what I know, however many times I trigger the eventListener, it will always fire an event. Why does my eventListener does not do this? It doesn't even listen for it twice, but I have not set the option
... so I don't get why.
No errors either.
I'm lost for hours on it.
Searched google up and down, can't find the same issue. Close issues where, if the person forgot to add the function as a callback and instead directly injected the function they wanna call. I did not do this. Maybe it's something close I don't get.
Minimized my project to the smallest repeatable part and uploaded it here:
https://jsfiddle.net/shknz67a/
why? - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
20 Replies
What are you trying to accomplish? Just close the popup when they click abort?
You're adding an event listener to
.popup.popup-confirm but then you're removing that from the DOM after it's clicked (presumably) -- is that the issue?because of
once: true https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#onceMDN Web Docs
EventTarget: addEventListener() method - Web APIs | MDN
The addEventListener() method of the EventTarget interface
sets up a function that will be called whenever the specified event is delivered to the target.
yes, if they click abort or the space that is blured.
The issue is, that it does not open twice.
Everything works on the first click of the page. But you can also notice, that for demonstration purposes I added a "click" to the page, whenever this popup opens... It only seems to listen for it once.
I used bubbling and
once: true for the eventListenener in the popup to be as effiencient as possible (only adding one eventListener for every possibility, that does not need to be garbage collected)
But the once: true should not be relevant for how many times I can open the modal, if that makes sense.when you change the innerHTML when adding the popup you are nuking the event that you added on the first line
why is that so and what would be a proper way to do it?
I would use
append() or appendChild() instead of changing innerHTMLCan I use the
appendChild() on the popup container and innerHTML the content in? (because of classes and stuff, I don't like the js way of manually setting everything and then appending it, its so many lines of code, compared to innerHTML)use document.createElement() to make the popup and set the innerHTML for it if you don't want to do it everything one by one
why? - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
yeah, that was the question, I'll update :)
Why is that so btw? I want to read on it
that is a valid question i don't know the answer to so you gonna need to wait for someone that does 😄
How did you learn about this? Did you face similar problems as me?
Thanks so much for your help tho. Marking this as solved now.
You mean how i figured out what is going on ?
yeah
i used browser dev tools
when i clicked the body i saw the event went poof
I need to get better at debugging then?! Did you create breakpoints at all?
nope i luckily used firefox dev tools you can see event tag on elements there
if an element has one
it's different in chrome
oh ok yeah, I'm on chrome