title: Why Javascript addEventlistener not working inside another addEventlistener
body: <p>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 <code>&quot;update&quot;</code> eventlistenr doesn't work for testing I have an alert there.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 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', () =&gt; {
          //console.log(e.target.id)
          console.log("update working");
        });
  
        del.addEventListener('click', () =&gt; {
          //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</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;CRUD&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;h3&gt;ADD USER&lt;/h3&gt;
          &lt;form id="form"&gt;
            &lt;div class="form-group"&gt;
              &lt;input class="form-control" id="name" type="text" name="name" placeholder="Name" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input class="form-control" id="address" type="text" name="address" placeholder="Address" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input class="form-control" id="age" type="number" name="age" min="10" max="100" placeholder="Age" required&gt;
            &lt;/div&gt;
            &lt;button class="btn btn-primary form-control" id="btn" type="button"&gt;SUBMIT&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="col-md-8"&gt;
          &lt;h3&gt;USERS&lt;/h3&gt;
          &lt;table id="userTable" class="table table-striped"&gt;
            &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th colspan="3"&gt;Age&lt;/th&gt;
            &lt;/tr&gt;
  
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Modal --&gt;
    &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
            &lt;h4 class="modal-title" id="myModalLabel"&gt;Update User&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;&lt;/div&gt;
          &lt;div class="modal-footer"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script type="text/javascript" src="asset/js/script.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>