如何在删除的元素上恢复 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()and show()，但是在两个取消的表单之后它停止工作并且我继续向未显示的 HTML 添加表单。我还尝试将按钮决策控制代码移到点击事件之外，但它也不起作用。

Answer 1

这是范围问题。actualbio外面不可用$("#user_bio").on('click', function(){..}改变这个var actualbio = $("#user_bio_container").html();到actualbio&nbsp;=&nbsp;$("#user_bio_container").html();并使用var&nbsp;actualbio&nbsp;=&nbsp;'';略低于$(document).ready(function(){这样变量actualbio在里面的所有事件处理程序中都可用$(document).ready关于事件不工作问题您需要附加这样的事件，因为当您清除 html 时，#user_bio 连同所有附加事件一起从 dom 中删除。$("#user_bio_container").on('mouseover',&nbsp;"#user_bio",&nbsp;function()&nbsp;{......})