使用此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中。我还尝试将按钮决策控制代码移到click事件之外,但是它也不起作用。
这是一个范围问题。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() {......})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句