Event listener doesn't trigger dynamically created element on JavaScript

Question

I have problem triggering dynamically created button. Event listener only works fine if element is created manually.

<!DOCTYPE html>
<html>
<body>
<button id="create">Create new button</button>
<div id="mydiv"></div>

<script>
document.getElementById("create").addEventListener('click', (x) => {
document.getElementById("mydiv").innerHTML = "<button id='show'>Show alert</button>";});

document.getElementById('show').addEventListener('click', (b) => {
alert("It works");});
</script>
</body>
</html>

//Sorted out with event delegation:

<!DOCTYPE html>
<html>
<body>
<button id="create">Create new button</button>
<div id="mydiv"></div>

<script>
document.getElementById("create").addEventListener('click', (x) => {
    document.getElementById("mydiv").innerHTML = "<button class='show'>Show alert</button>";
});
const parent = document.getElementById('mydiv');
parent.addEventListener('click', (b) => {
if (x.target.className === 'show') {alert("It works")}
;});
</script>
</body>
</html>

I want to create one page website were would be many different containers which will refresh or disappears or appears triggered by event listener. — jacob3143
– jacob3143, Commented Dec 30, 2019 at 19:17

Scott Marcus · Accepted Answer · 2019-12-30 18:57:29Z

1

You must move the code that binds the new element into the event handler for the code that creates it because when the event binding for the new element is outside, it fails immediately because the element doesn't exist.

In other words, you have to wait for the element to exist before you can bind it.

<!DOCTYPE html>
<html>
<body>
<button id="create">Create new button</button>
<div id="mydiv"></div>

<script>
document.getElementById("create").addEventListener('click', (x) => {

  document.getElementById("mydiv").innerHTML = "<button id='show'>Show alert</button>";
  
  // This code won't be run until after the new element is created, so it will
  // be safe to reference it at that point.
  document.getElementById('show').addEventListener('click', (b) => {
    alert("It works");
  });
  
});


</script>
</body>
</html>

answered Dec 30, 2019 at 18:57

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Washington Borges · Accepted Answer · 2019-12-30 19:05:20Z

0

Try this:

<!DOCTYPE html>
<html>
<body>
<button id="create">Create new button</button>
<div id="mydiv"></div>
<script>
document.getElementById("create").addEventListener('click', (x) => {
document.getElementById("mydiv").innerHTML = "<button id='show'>Show alert</button>";});
document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'show'){
        alert("It works");
     }
 });
</script>
</body>
</html>

answered Dec 30, 2019 at 19:05

Washington Borges

193 bronze badges

Collectives™ on Stack Overflow

Event listener doesn't trigger dynamically created element on JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related