使用jQuery在hide/show按钮上重新加载页面

Question

我正在使用jQuery div通过单击显示/隐藏按钮来显示/隐藏a .但是,我的代码不起作用,因为每次它返回到我点击按钮之前的方式.我几乎可以肯定这是由于页面重新加载,因为每次我点击一个按钮它都会重新加载页面.
有谁知道这背后的原因是什么？

这是重要的代码块:

<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();
}

当我把按钮放在表格外面时它起作用.为什么？

Answer 1

那是因为你的button元素没有type指定,默认情况下button元素的type设置为"submit".当您单击其中一个按钮时,他们会尝试提交您的表单.只需指定一个type"按钮"即可解决此问题:

<button type="button" class="close" id="hidemultmachines" onclick="..."></button>