如何使HTML按钮不重新加载页面

Question

我有一个按钮(<input type="submit">).单击它时页面将重新加载.由于我有一些hide()在页面加载时调用的jQuery 函数,这会导致这些元素再次被隐藏.如何使按钮不执行任何操作,因此我仍然可以添加在单击按钮但不重新加载页面时发生的某些操作.

Answer 1

没有必要js或jquery.停止页面重新加载只需将按钮类型指定为"按钮".如果您没有指定按钮类型,浏览器会将其设置为"重置"或"提交"导致页面重新加载.

 <button type='button'>submit</button> 

Answer 2

使用<button>元素或使用<input type="button"/>.

Answer 3

在HTML中:

<form onsubmit="return false">
</form>

为了避免刷新所有"按钮",即使分配了onclick.

Answer 4

您可以使用jQuery在按钮上添加单击处理程序并返回false.

$("input[type='submit']").click(function() { return false; });

要么

$("form").submit(function() { return false; });

Answer 5

在HTML中:

<input type="submit" onclick="return false">

使用jQuery,已经提到了一些类似的变体.

Answer 6

您可以使用包含提交按钮的表单。然后使用jQuery防止表单的默认行为：

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

Answer 7

您还可以使用 JavaScript 来实现：

  let input = document.querySelector("input");
  input.addEventListener("submit", (event) => {
    event.preventDefault();
  })

Answer 8

正如上面的评论之一（隐藏）所述，可以通过不在表单标签内放置按钮标签来解决此问题。当按钮位于表单之外时，页面不会自行刷新。