如何在删除的元素上恢复 JQuery 事件？

Question

有了这个 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>
    ";
?>

这是我的脚本。当用户点击 bio 段落时，它将段落内部存储在一个变量中，然后清空容器并添加一个表单。如果表格被取消，我想删除表格并添加我在段落中的前一个 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");
        });

        });

    });

我曾尝试使用 hide() 和 show()，但在两次取消表单后它停止工作，我不断向 HTML 添加未显示的表单。我也试过把按钮的决策控制代码移到点击事件之外，但是也没用。

Answer 1

这是范围问题。 actualbio 在 $("#user_bio").on('click', function(){..}

以外不可用

改变这个

var actualbio = $("#user_bio_container").html();

至

actualbio = $("#user_bio_container").html();

并使用

var actualbio = '';

就在

下面

$(document).ready(function(){

这样变量 actualbio 在 $(document).ready

中的所有事件处理程序中都可用

关于事件不工作的问题

您需要附加这样的事件，因为当您清除 html 时，#user_bio 连同所有附加事件一起从 dom 中删除。

$("#user_bio_container").on('mouseover', "#user_bio", function() {......})

如何在删除的元素上恢复 JQuery 事件？

How to restore JQuery events on removed element?

html

javascript

php

jquery

jquery-events