Ask for help again! There is no corresponding response after clicking delete on the page.

emmm this is still part of the todolist code. There is no response when I click to delete the task after the web page is opened. I wrote console.log () in the on click event and did not respond

if you first define $delete_task and then write $delete_task = $(".action.delete") in render_task_list (), you will get an error, showing typeerror, delete_task undefined

all the current code is here link description
this is the html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Todo App</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/base1.css">
</head>
<body>
    <div class="container"><!--  -->
        <h1>ToDo</h1>
        <form class="add-task">
            <input name="content" 
                   type="text" 
                   placeholder="e.g. "
                   autofocus 
                   autocomplete="off" 
             >
            <button type="submit" class="submit-task">submit</button>
        </form>
        <div class="tasks-list"><!--  -->
            <!-- <div class="task-item"> -->
                <!-- <span><input type="checkbox"></span> -->
                <!-- <span class="task-content">item content 1</span> -->
                <!-- <span>delete</span> -->
                <!-- <span>detail</span> -->
            <!-- </div> -->
        </div>        <!--  -->
        <div class="task-detail-mask"></div>
        <div class="task-detail"><!--  -->
            <div class="content"><!--  -->
                
            </div> <!--  -->
            <div><!--  -->
                <div class="desc">
                    <textarea id=""></textarea>
                </div>
            </div><!--  -->
            <div class="remaind"><!---->
                <input type="date">
                <!-- <button type="submit">submit</button> -->
            </div><!--  -->
        </div><!--  -->
    </div><!--  -->
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="node_modules/store/store.js"></script>
    <script type="text/javascript" src="js/jsbase.js"></script>
</body>
</html>

JS Code

;(function () {
    "use strict";
    var $submit_task = $(".submit-task")
    ,   $delete_task = $(".action.delete")
    ,   task_list =[]
    ;

    init();

    $submit_task.on("click",function(e){
        var new_task = {};
        // 
        e.preventDefault();
        // task
        var $input = $(this).prev(find("input[name=content]"));
        new_task.content= $input.val();
        // task  
        if(!new_task.content) return ;
        // task
        if(add_task(new_task)){
            // render_task_list();
            $input.val(null);
        }
    })

    $delete_task.on("click",function(){
        console.log("1",1);
        var $this = $(this);
        var $item = $this.parent().parent();
        console.log("$item.data(index)",$item.data("index"));

    })

    function add_task(new_task){
        //tasktasklist
        task_list.push(new_task);
        // localStorage
        refresh_task_list();
        return true;
    }
    
    /*localStoragetpl*/
    function refresh_task_list(){
        store.set("task_list",task_list);
        render_task_list();
    }

    function delete_task(index){
        // indexIndex
        if(!index|| !task_list[index]) return ;

        delete task_list[index];
        // localStorage
        refresh_task_list();
    }


    function init(){
        task_list = store.get(".task-list")||[];
        if(task_list.length)
            render_task_list();
    }

    function render_task_list(){
        var $task_list= $(".tasks-list");
        $task_list.html("");
        for( var i = 0 ; i < task_list.length ; iPP)
        {
             var $task = render_task_item(task_list[i],i);
             $task_list.append($task);
        }
    }

    function render_task_item(data,index){ 
        var list_item_item = 
                            "<div class="task-item" data-index=""  + index +"">"+
                            "<span><input type="checkbox"></span>"+
                            "<span class="task-content">"+data.content+"</span>"+
                            "<span class="fr">"+
                              "<span class="action delete"> </span>"+
                              "<span class="action"> </span>"+
                            "</span>"+
                            "</div>";
        return $(list_item_item);
    }
})();