使用此 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");
});
});
});
我尝试过使用 hide()
和 show()
,但是在两个取消的表单之后,它停止工作,并且我不断向未显示的 HTML 添加表单。我还尝试将按钮决策控制代码移到点击事件之外,但它也不起作用。
最佳答案
这是一个范围问题。 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() {......})
关于javascript - 如何恢复已删除元素上的 JQuery 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61694756/