[英]Page reloads on hide/show button click using jQuery
我正在使用 jQuery 通过单击显示/隐藏按钮来显示/隐藏div
。 但是,我的代码不起作用,因为每次它返回到我单击按钮时的状态时。 我几乎可以肯定这是由于页面重新加载造成的,因为每次我点击一个按钮时它都会重新加载页面。
有谁知道这背后的原因是什么?
这是重要的代码块:
<form role="form" method="post" action="./something.php">
...
<button id="hidemultmachines" onclick="$('#multmachines').hide(); $(this).hide(); $('#showmultmachines').show();">
Hide section below ...
</button>
<button id="showmultmachines" onclick="$('#multmachines').show(); $(this).hide(); $('#hidemultmachines').show();">
... Create multiple entries
</button>
<div id="multmachines">
...
</div>
<div>
<div>
<input type="hidden" name="total" value="{ $smarty.section.i.total }">
<button type="submit" name="Submit" value="Save">Save</button>
</div>
</div>
</form>
这是我在标题中的 jQuery 代码:
$(document).ready(function(){
$('#hidemultmachines').hide();
$('#multmachines').hide();
}
当我将按钮放在表单之外时,它可以工作。 为什么?
那是因为您的button
元素没有指定type
,默认情况下button
元素的type
设置为“提交”。 当您单击其中一个按钮时,它们会尝试提交您的表单。 只需指定一种“按钮” type
即可解决此问题:
<button type="button" class="close" id="hidemultmachines" onclick="..."></button>
这里有几件事:
1) 最好将 HTML 与 jQuery 分开。 2) 按钮的默认行为是提交表单,这意味着如果没有表单操作,它将刷新页面。 这可以通过 preventDefault() 解决
用代码总结一下:
HTML
<button class="close" id="hidemultmachines" >Hide section below <img alt="Close" width="35" height="35" src="../images/close.png"> </button>
JS:
$(document).ready(function() {
$("#hidemultmachines").on("click", function(e) {
e.preventDefault();
$('#multmachines').hide();
$(this).hide();
$('#showmultmachines').show();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.