javascript - 当我刷新页面时,Jquery 代码无法完成
问题描述
我已经实现了 AJAX 代码,它在 PHP 中调用外部页面,在该页面中查询数据库并创建表。当 AJAX 调用页面时,jQuery 代码将 PHP 表插入<p>
标签中,该标签通过动画创建一种“框”,并根据 PHP 表将框的大小调整为 HEIGHT。当它第一次正常工作时,当我使用适当的按钮关闭“框”并再次单击它以查看该框时,后者仍然<p>
被定义它的标签的标准高度阻塞。如何解决这个问题并让它在每次运行 jQuery 动画时都能正常工作而无需刷新页面?
<input type="button" value="Close Ripostiglio" class="hidden1" onclick="close1()">
<p class="par1" id="pa1"> Ripostiglio </p>
<script>
function loadDocument(e) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = gestisciResponse;
httpRequest.open("GET","function.php", true);
httpRequest.send();
httpRequest.reload();
}
function gestisciResponse(e) {
if (e.target.readyState == 4 && e.target.status == 200) {
document.getElementById("dinamicZone").innerHTML = e.target.responseText;
}
}
//OPEN BOX
$(document).ready(function(){
//RIPOSTIGLIO
$(".par1").click(function right(){
var p = $(".par1");
var n = $(".hidden1");
p.animate({left: '300px'}, "slow");
p.animate({height: '$(#dinamicZone).height()'}, "slow");
p.animate({width: '350px'}, "slow");
p.html("<div id='dinamicZone'></div>");
setTimeout(loadDocument, 2000); //delay the open of table
n.show();
});
function close1(){
$(".nascosto1").click(function destra(){
var p = $("#pa1");
var p = $(".par1");
var c = $(".hidden1");
var s = $(".add1");
p.animate({height: '65px'}, "slow");
p.animate({width: '150px'}, "slow");
p.animate({left: '0px'}, "slow");
s.hide();//TOLGO LA SCRITTA AGGIUNGI
p.html("Ripostiglio"); //"RIMETTO" FORZATAMENTE LA SCRITTA CANTINETTA VINI
c.hide();
});
}
</script>
解决方案
dinamicZone 对象在 close1() 中被销毁。因此,当您再次单击它时,它没有更改大小的参考。重新加载页面将重新初始化页面,从而重新创建 dinamicZone。
也许更改 close() 中重新分配 p.HTML 值的行。如果您注释掉该行,则调整大小应该有效。
----忽略下面这个----
Without it, you're trying to set the height to 65 when it contains an object that is higher, which is probably why it did not work.
```
$(".nascosto1").click(function destra(){
// var p = $("#pa1"); // duplicate
var p = $(".par1");
var c = $(".hidden1");
var s = $(".add1");
p.html("Ripostiglio"); //"RIMETTO" FORZATAMENTE LA SCRITTA CANTINETTA VINI
p.animate({height: '65px'}, "slow");
p.animate({width: '150px'}, "slow");
p.animate({left: '0px'}, "slow");
s.hide();//TOLGO LA SCRITTA AGGIUNGI
c.hide();
});
```
推荐阅读
- kendo-ui - 未捕获的类型错误:$(...).kendoAutoComplete 不是函数
- python - 使用正则表达式读取多个换行符和空格之间的文本
- powerbi - Power BI 排序 - 按值排序时将特定行保留在表的底部
- excel - Excel:根据输入聚合列的元素
- python - 从特定 ip 发送 udp 数据包
- java - 如何使用 JPA 重命名主键约束?
- javascript - 将对象转换为数组时,Angular 中的 Http GET 方法出错
- anaconda - Anaconda 错误:'git' 不是内部或外部命令、可运行程序或批处理文件
- jenkins - 詹金斯得到一个具有随机后缀的工件的文件名
- java - 无法通过将 JavaxMail 与 POP3 服务器一起使用来删除电子邮件