jQuery on（“click”，....）函数不会为我动态创建的div执行

Question

我正在创建一个待办事项列表，我希望能够点击带有“待办事项”的div并直接将其从数据库中删除。这是我的主页。

    <div class="hoofder">
      <h2>Voegtoe:</h2>
    </div>
         <?php include('connect.php'); ?>
    <form method="post" action="add.php">
      <div class="input">
        <label>Taak</label>
        <input type="text" name="taak">
      </div>
      <div class="input">
        <button type="submit" name="add_todo class="btn">Register</button>
            <?php include('getthings.php'); ?>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
        $(document).ready ( function () {
            alert("1");
         $(document).on("click", ".lijst", function () {
              alert("2.");
                    var del_id = $(this).attr('id').substring(1);
                    alert(del_id);
                    var $ele = $(this).parent();
                    $.ajax({
                        type:'POST',
                        url:'delete.php',
                        data:{del_id:del_id},
                        success: function(data){
                              if(data=="YES"){
                                 $ele.fadeOut().remove();
                             }else{
                                 alert("can't delete the row");
                             }
                        }
                    });
                });
            });
                    alert("end");
     </script>
    </form>
  </body>
</html>

delete.php：

<?php
include 'connect.php';
include 'add.php';
$delete_this = $_POST['del_id'];
$qry = "DELETE FROM tedoen WHERE id ='$delete_this'";
$result = mysqli_query($conn, $qry);
?>

当我加载页面时“alert（del_id）;”回归未定义。 这是一个问题，因为我需要它不是不确定的。你知道为什么吗？