Question

我正在使用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();
}

当我将按钮放在表单之外时，它可以工作。为什么呢？

Answer 1

这是因为您的button元素未指定type，默认情况下button个元素的type设置为＆＃34;提交＆＃34 ;。当您单击其中一个按钮时，他们会尝试提交您的表单。只需指定一个type＆＃34;按钮＆＃34;将解决这个问题：

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

Answer 2

这里有几件事：

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

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

2 个答案: