title: Add event listener to items that don't exist on the page
body: <p>I'm trying to add an event listener to items that don't exit yet. I will be adding the items dynamically, but I would like them to have event listener when they are added to the DOM. I have used the .on() function but this only works for items that are on the page when it loads and not for items added dynamically. The following is my code:</p>
  
  <pre><code>$(document).ready(function () {
      var $add_button = $('#add-item')
      var newItem;
      var $incompleteTasks = $('#incomplete-tasks');
  
      $('button.check').on("click", function () {
  
          alert('Helloww');
      });
  
      $add_button.click(function () {
  
          newItem = $('#new-task').val();
  
          //create li element and assign it to variable
          var li = $('&lt;li&gt;&lt;/li&gt;');
          var label = $('&lt;label&gt;&lt;/label&gt;');
          var button = $('&lt;button class="check"&gt;Check&lt;/button&gt;');
  
          //Use input value as the text for li item
          label.text(newItem);
  
  
          //append new item to incomplete tasks ul
  
          $incompleteTasks.append(li);
          li.append(label);
          li.append(button);
  
      });
  
  });
  </code></pre>
  
  <p>I'm not sure where I'm going wrong here. </p>
  
  <p>Thank you for the help. </p>