如何在已删除元素上恢复JQuery事件?

使用此PHP,我添加以下HTML。我之所以使用PHP,是因为我从数据库中检索信息,但这与这个问题无关。

<?php
    echo "
    <div id='user_bio_container'>
    <p id='user_bio'>My bio<i id='user_bio_edit' class='fas fa-edit'></i></p>
    </div>
    ";
?>

这是我的脚本。当用户单击简历段落时,它将段落的内部存储在变量中,然后清空容器并添加一个表单。如果表单被取消,我想删除该表单并添加该段中以前的HTML。问题是,当我尝试这样做时,新段落不响应事件(鼠标悬停,单击...)。

    $('#user_bio_edit').css("display", "none");
    $(document).ready(function(){
        $("#user_bio").on('mouseover', function(){
            $('#user_bio_edit').css("display", "inline");
        });

        $("#user_bio").on('mouseleave', function(){
            $('#user_bio_edit').css("display", "none");
        });

        $("#user_bio").on('click', function(){
            var actualbio = $("#user_bio_container").html();
            $('#user_bio_container').empty();
            var user_bio_form = 
            "<form id='change_user_bio'>" +
            "<span id='cancel_user_bio'>Cancel</span>"
            "</form>";
            $("#user_bio_container").append(user_bio_form);

        //Button decision control
        $("#cancel_user_bio").on('click', function(){
            $("#user_bio_container").empty();
            $("#user_bio_container").append(actualbio);
            $('#user_bio_edit').css("display", "none");
        });

        });

    });

I have tried using hide() and show(), but after two cancelled forms it stops working and I keep adding forms to the HTML that are not shown. I also tried moving the button decision control code outside the click event, but it does not work either.