[英]fade effect in JQUERY UI calls document ready function on fadeout
Does using fade effect as follows: $( "#specialBox" ).toggle( "fade" )
in jQuery UI cause the page to reload when fading out? 是否使用如下淡入淡出效果:jQuery UI中的$( "#specialBox" ).toggle( "fade" )
导致页面淡出时重新加载页面?
By the way this seems to happen only when I click the button that triggers the fadeout, (rather than pressing enter). 顺便说一句,这似乎仅在单击触发淡出的按钮时才发生(而不是按Enter)。
{ {
<div id="specialBox"> //the elements who fade
<p>Special box content ...</p>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<input id = "addquery" type = "button" class = "test" value = "add query"></input> //triggering button
} }
<html id= "thishtml">
<head>
<script src = "jquery-2.1.0.js"></script>
<link type = "text/css" rel = "stylesheet" href = "style.css"></link>
<script type = "text/javascript" src = "graffjavs.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<form id = "docy">
<input id = "gtr" type = "text" class = "txt"></input>
<input id = "graffbut" type = "button" class = "test" value = "test JQUERY"></input>
<div class = "out" id="output">
</div>
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<p>Special box content ...</p>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<input id = "addquery" type = "button" class = "test" value = "add query"></input>
</form>
</body>
</html>
function toggleOverlay(){
var addquery = document.getElementById('addquery');
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(addquery.isClicked == "1"){
addquery.isClicked = "0"
$( "#specialBox" ).effect( "fade" );
$( "#overlay" ).effect( "fade" );
//overlay.style.display = "none";
//specialBox.style.display = "none";
} else {
addquery.isClicked = "1"
$( "#specialBox" ).toggle( "fade" );
$( "#overlay" ).toggle( "fade" );
//overlay.style.display = "block";
//specialBox.style.display = "block";
}
}// triggered function causing the elements to fade
function tog()
{
document.getElementById('addquery').isClicked = "0";
$('#addquery').click(function(){toggleOverlay();});
}//function that assigns the triggered function to the button
You button is a submit button. 您的按钮是一个提交按钮。 This is, has type="submit"
. 这是type="submit"
。 When you press it, the form is submitted. 当您按它时,将提交表单。 Change the property to type="button"
. 将属性更改为type="button"
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.