[英]How to delete content after closing the jquery ui dialog
In my project, I use jquery ui dialog. 在我的项目中,我使用jquery ui对话框。
Before transmit_div closing, staff_div has John-Stack and sltStfId has Robert-Sansa. 在send_div关闭之前,staff_div具有John-Stack,而sltStfId具有Robert-Sansa。 And after transmit_div closing, I want to delete the content of "John-Stack" and "Robert-Sansa". 在send_div关闭之后,我想删除“ John-Stack”和“ Robert-Sansa”的内容。 So I choose beforeclose parameter when init the transmit_div dialog. 因此,在初始化send_div对话框时,我选择beforeclose参数。
Here is js code: 这是js代码:
<script>
$(document).ready(function()
{
$('#transmit_app').click(function(){
$('#transmit_div').dialog("open");
$('#transmit_div').dialog("option","title");
});
});
$('#transmit_div').dialog({
autoOpen:false,
title:"selectUser",
modal:true,
height:500,
width:600,
show:{effect:"blind",duration: 1000},
hide:{effect:"explode",duration: 1000},
beforeclose: function() {
staff_div.innerHTML="<input type='button' id='selAllButton' value='selectAll'><br />";
sltStfId.innerHTML="";
}
});
</script>
Here is html code: 这是html代码:
<input type="button" id="transmit_app" value="trsmit" />
<div id="transmit_div" >
<div id="staff_div" class="staff" >
<input type="button" id="selAllButton" value="selectAll"><br />
John-Stack
</div>
<div class="selected_staff" >
<input type="button" onclick="delete_allStaff()" value="deleteAll">
<div id="sltStfId">
Robert-Sansa
</div>
</div>
</div>
But unfortnately, it works fail.I colse transmit_div dialog, and open it again. 但是不幸的是,它失败了。我选中了send_div对话框,然后再次打开它。 "John-Stack" and "Robert-Sansa" are still exists. “ John-Stack”和“ Robert-Sansa”仍然存在。
Who can help me? 谁能帮我?
You might want to thy this code. 您可能想要您的这段代码。 Hope it helps. 希望能帮助到你。
<script>
$(document).ready(function(){
$('#transmit_app').click(function(){
$('#transmit_div').dialog("open");
$('#transmit_div').dialog("option","title");
});
$('#transmit_div').dialog({
autoOpen:false,
title:"selectUser",
modal:true,
height:500,
width:600,
show:{effect:"blind",duration: 1000},
hide:{effect:"explode",duration: 1000},
beforeClose: function myCloseDialog() {
$('#staff_div').html("<input type='button' id='selAllButton' value='selectAll'><br />");
$('#sltStfId').html("");
}
});
});
</script>
$(document).ready(function() { $('#transmit_app').click(function(){ $('#transmit_div').dialog("open"); $('#transmit_div').dialog("option","title"); }); $("#delete").click(function(){ $("#sltStfId,#staff_div").remove(); }) }); $('#transmit_div').dialog({ autoOpen:false, title:"selectUser", modal:true, height:500, width:600, show:{effect:"blind",duration: 1000}, hide:{effect:"explode",duration: 1000}, beforeclose: function() { staff_div.innerHTML="<input type='button' id='selAllButton' value='selectAll'><br />"; sltStfId.innerHTML=""; } });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="button" id="transmit_app" value="trsmit" /> <div id="transmit_div" > <input type="button" id="selAllButton" value="selectAll"><br /> <div id="staff_div" class="staff" > John-Stack </div> <div class="selected_staff" > <input type="button" value="deleteAll" id="delete"> <div id="sltStfId"> Robert-Sansa </div> </div> </div>
You want to use the close
event function, not the beforeclose
event. 您要使用close
事件功能,而不要使用beforeclose
事件。
Also you want to target the container div to empty()
all elements contained in it. 另外,您还希望将容器div定位为empty()
包含在其中的所有元素。
$("#transmit_div").empty();
$(document).ready(function() { $('#transmit_app').click(function() { $('#transmit_div').dialog("open"); $('#transmit_div').dialog("option", "title"); }); }); $('#transmit_div').dialog({ autoOpen: false, title: "selectUser", modal: true, height: 500, width: 600, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 }, close: function() { deleteAll(); } }); $("#delete-all").on("click", function() { deleteAll(); }); function deleteAll() { $("#transmit_div").empty(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <input type="button" id="transmit_app" value="trsmit" /> <div id="transmit_div"> <div id="staff_div" class="staff"> <input type="button" id="selAllButton" value="selectAll"><br /> John-Stack </div> <div class="selected_staff"> <input id="delete-all" type="button" value="deleteAll"> <div id="sltStfId"> Robert-Sansa </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.