Why Javascript addEventlistener not working inside another addEventlistener

Question

I have a HTML form and I want to create a CRUD operation. I can submit the form and display the user data but when I create an update button and want to have an addEventListener for the update and delete button. button clicks doesn't work.Please check the blow code the "update" eventlistenr doesn't work for testing I have an alert there.

window.onload = function() {
  var users = [];

  var btn = document.querySelector('#btn');
  console.log(btn);
  var form = document.querySelector('#form');

  btn.addEventListener("click", function() {
    var obj = {
      name: document.querySelector('#name').value,
      address: document.querySelector('#address').value,
      age: document.querySelector('#age').value,
    } //obj ends here

    users.push(obj);
    console.log(users);

    var userTable = document.querySelector('#userTable');
    var tbody = document.querySelector('tbody');
    var tr = document.createElement('tr');

    tbody.appendChild(tr);

    for (var i = 0; i < users.length; i++) {
      var tdata1 = document.createElement('td');
      var tdata2 = document.createElement('td');
      var tdata3 = document.createElement('td');
      var tdata4 = document.createElement('td');
      var tdata5 = document.createElement('td');

      var update = document.createElement("button");
      update.innerText = 'Update';
      update.id = "update" + i;
      tdata4.appendChild(update);

      console.log(update);
      update.addEventListener("click", function() {
        console.log('update clicked');
      });

      var del = document.createElement("button");
      del.innerText = 'Delete';
      del.id = "delete" + i;
      tdata5.appendChild(del);

      tdata1.innerText = users[i].name;
      tdata2.innerText = users[i].address;
      tdata3.innerText = users[i].age;
      tdata4.innerHTML = update.outerHTML;
      tdata5.innerHTML = del.outerHTML;;

      update.addEventListener('click', () => {
        //console.log(e.target.id)
        console.log("update working");
      });

      del.addEventListener('click', () => {
        //console.log(e.target.id)
        console.log("delete working");
      });

      form.reset();
    }
    tr.appendChild(tdata1);
    tr.appendChild(tdata2);
    tr.appendChild(tdata3);
    tr.appendChild(tdata4);
    tr.appendChild(tdata5);
  }); // btn event listener ends here
} // window onload ends here

<!DOCTYPE html>
<html>

<head>
  <title>CRUD</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>ADD USER</h3>
        <form id="form">
          <div class="form-group">
            <input class="form-control" id="name" type="text" name="name" placeholder="Name" required>
          </div>
          <div class="form-group">
            <input class="form-control" id="address" type="text" name="address" placeholder="Address" required>
          </div>
          <div class="form-group">
            <input class="form-control" id="age" type="number" name="age" min="10" max="100" placeholder="Age" required>
          </div>
          <button class="btn btn-primary form-control" id="btn" type="button">SUBMIT</button>
        </form>
      </div>
      <div class="col-md-8">
        <h3>USERS</h3>
        <table id="userTable" class="table table-striped">
          <tr>
            <th>Name</th>
            <th>Address</th>
            <th colspan="3">Age</th>
          </tr>

        </table>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Update User</h4>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="asset/js/script.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</body>

</html>

@1891677 Could you please help – Rashmi UI May 14 '21 at 21:08 — Rashmi UI, May 14 '21 at 21:08
Are you testing in internet explorer? – Dan Mullin May 14 '21 at 21:10 — Dan Mullin, May 14 '21 at 21:10

score 2 · Answer 1 · answered May 14 '21 at 21:13

This is due to the fact that your element is dynamically created. You should use event delegation to handle the event.

Here is an article about event delegation event delegation article

See This Old Post Solution Related To Your Doubt

https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript#:~:text=If%20you%20create%20an%20element,is%20technically%20just%20a%20string.

Prosy Arceno · Accepted Answer · 2021-05-14T21:58:23.890

You have a lot of typos, but here:

But basically I removed these lines:

tdata4.innerHTML = update.outerHTML;
tdata5.innerHTML = del.outerHTML;

And a duplicate addEventListener for the update:

update.addEventListener("click", function() {
  console.log('update clicked');
});

window.onload = function() {
  var users = [];

  var btn = document.querySelector('#btn');
  var form = document.querySelector('#form');

  btn.addEventListener("click", function() {
    var obj = {
      name: document.querySelector('#name').value,
      address: document.querySelector('#address').value,
      age: document.querySelector('#age').value,
    } //obj ends here

    users.push(obj);

    var userTable = document.querySelector('#userTable');
    var tbody = document.querySelector('tbody');
    var tr = document.createElement('tr');

    tbody.appendChild(tr);

    for (var i = 0; i < users.length; i++) {
      var tdata1 = document.createElement('td');
      var tdata2 = document.createElement('td');
      var tdata3 = document.createElement('td');
      var tdata4 = document.createElement('td');
      var tdata5 = document.createElement('td');

      var update = document.createElement("button");
      update.innerText = 'Update';
      update.id = "update" + i;
      tdata4.appendChild(update);

      update.addEventListener("click", function(e) {
        console.log('update clicked on id ', e.target.id);
      });

      var del = document.createElement("button");
      del.innerText = 'Delete';
      del.id = "delete" + i;
      tdata5.appendChild(del);

      tdata1.innerText = users[i].name;
      tdata2.innerText = users[i].address;
      tdata3.innerText = users[i].age;

      del.addEventListener('click', (e) => {
        console.log("delete working on id ", e.target.id);
      });

      form.reset();
    }
    tr.appendChild(tdata1);
    tr.appendChild(tdata2);
    tr.appendChild(tdata3);
    tr.appendChild(tdata4);
    tr.appendChild(tdata5);
  }); // btn event listener ends here
} // window onload ends here

<!DOCTYPE html>
<html>

<head>
  <title>CRUD</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>ADD USER</h3>
        <form id="form">
          <div class="form-group">
            <input class="form-control" id="name" type="text" name="name" placeholder="Name" required>
          </div>
          <div class="form-group">
            <input class="form-control" id="address" type="text" name="address" placeholder="Address" required>
          </div>
          <div class="form-group">
            <input class="form-control" id="age" type="number" name="age" min="10" max="100" placeholder="Age" required>
          </div>
          <button class="btn btn-primary form-control" id="btn" type="button">SUBMIT</button>
        </form>
      </div>
      <div class="col-md-8">
        <h3>USERS</h3>
        <table id="userTable" class="table table-striped">
          <tr>
            <th>Name</th>
            <th>Address</th>
            <th colspan="3">Age</th>
          </tr>

        </table>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Update User</h4>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="asset/js/script.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</body>

Why Javascript addEventlistener not working inside another addEventlistener

2 Answers2