title: How To Attach EventListener With Dynamically Added Element With Vanilla Javascript?
body: <p>So the Scenario im working into is as this</p>
  <p>Im Creating A Kanban Style App Using HTML5,CSS &amp; Pure Javascript
  <a href="https://i.stack.imgur.com/PefYO.jpg" rel="nofollow noreferrer">Screenshot Of Said App </a></p>
  <p>So the each board contains few tasks added by hardcode , and there are eventlistener already attached to tasks which were originally there , so the problem is eventlistener is not getting attached to newly added/appended elements(tasks)
  How to attach those eventlisteners to newly appended childs also ?</p>
  <p>Here's my javascript code</p>
  <pre><code>const draggable_task_tasks = document.querySelectorAll('.draggable_task')
  const kanban_boards = document.querySelectorAll('.kanban_board')
  
  document.addEventListener('DOMContentLoaded', function() {
      var date = new Date();
      var day = date.getDate();
      var month = date.getMonth() + 1;
      var year = date.getFullYear();
      var today = day + &quot;/&quot; + month + &quot;/&quot; + year;
      document.getElementById(&quot;date&quot;).innerHTML = &quot;Today : &quot;+today;
  }, false);
  
  function addTaskInBoard(id) {
      var currentButton = document.getElementById(id);
      var superParentId = currentButton.parentNode.parentNode.id;
      const superParent = document.getElementById(superParentId);
      console.log(superParent);
      var task_name = prompt(&quot;Enter task name&quot;);
     
      if (task_name != null) {
          var task = document.createElement('p');
          task.className = &quot;draggable_task&quot;;
        task.innerText  = task_name;
          task.setAttribute(&quot;draggable&quot;, &quot;true&quot;);
         superParent.appendChild(task);
  }
      
  
  }
  
  
  draggable_task_tasks.forEach(draggable_task =&gt; {
    draggable_task.addEventListener('dragstart', () =&gt; {
      draggable_task.classList.add('dragging')
    })
  
    draggable_task.addEventListener('dragend', () =&gt; {
      draggable_task.classList.remove('dragging')
    })
  })
  
  kanban_boards.forEach(kanban_board =&gt; {
    kanban_board.addEventListener('dragover', e =&gt; {
      e.preventDefault()
      kanban_board.classList.add('kanban_board-dragOver')
      const afterElement = getDragAfterElement(kanban_board, e.clientY)
      const draggable_task = document.querySelector('.dragging')
      if (afterElement == null) {
        kanban_board.appendChild(draggable_task)
      } else {
        kanban_board.insertBefore(draggable_task, afterElement)
      }
    })
  })
  
  kanban_boards.forEach(kanban_board =&gt; {
      kanban_board.addEventListener('dragleave', e =&gt; {
          kanban_board.classList.remove('kanban_board-dragOver')
      })
  })
  
  kanban_boards.forEach(kanban_board =&gt; {
      kanban_board.addEventListener('dragend', e =&gt; {
          kanban_board.classList.remove('kanban_board-dragOver')
      })
  })
  
  function getDragAfterElement(kanban_board, y) {
    const draggable_taskElements = [...kanban_board.querySelectorAll('.draggable_task:not(.dragging)')]
  
    return draggable_taskElements.reduce((closest, child) =&gt; {
      const box = child.getBoundingClientRect()
      const offset = y - box.top - box.height / 2
      if (offset &lt; 0 &amp;&amp; offset &gt; closest.offset) {
        return { offset: offset, element: child }
      } else {
        return closest
      }
    }, { offset: Number.NEGATIVE_INFINITY }).element
  }
  </code></pre>