使用jQuery重新加载隐藏/显示按钮

I'm using jQuery to show/hide a div by clicking on the show/hide buttons. However, my code doesn't work because every time it returns to the way it was before when I click on my buttons. I'm almost sure that this is due to a page reload, because every time I click on a button it reloads the page.
Does anybody know what could be the reason behind this?

通过单击show/hide按钮，我使用jQuery来显示/隐藏一个div。但是，我的代码不起作用，因为每次它返回到我点击按钮之前的样子。我几乎可以肯定这是由于页面重载，因为每次我点击一个按钮，它都会重新加载页面。有人知道这背后的原因吗?

Here is the important chunk of code:

这里是重要的代码块:

<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>

And this is my jQuery code in the header:

这是我在header中的jQuery代码:

$(document).ready(function(){
    $('#hidemultmachines').hide();
    $('#multmachines').hide();
}

When I put the buttons outside the form it works. Why?

当我把按钮放在窗体外面时，它就会工作。为什么?

2 个解决方案

#1

That's because your button elements have no type specified, and by default button elements have their type set to "submit". When you click one of the buttons, they attempt to submit your form. Simply specifying a type of "button" will fix this:

这是因为您的按钮元素没有指定类型，默认情况下按钮元素的类型设置为“submit”。当您单击其中一个按钮时，它们将尝试提交您的表单。简单地指定一种“按钮”类型就可以解决这个问题:

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

#2

A couple of things here:

这里有几件事:

1) It would be best to separate the HTML from the jQuery. 2) The default behavior for a button is to submit a form, which means it will refresh the page if there is no form action. This can be fixed with preventDefault()

1)最好将HTML与jQuery分开。2)按钮的默认行为是提交表单，这意味着如果没有表单动作，它将刷新页面。可以使用preventDefault()对其进行修复

To sum this up in code:

用代码总结一下:

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

#1

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

#2