Jquery 刷新问题表单

【问题标题】：Jquery refresh issue formsJquery 刷新问题表单
【发布时间】：2019-10-05 02:54:37
【问题描述】：

我通过 onclick 使用 HTML 表单和 jquery 的小 sn-p 来显示加载微调器。然而，微调器只显示一秒钟然后立即关闭。我认为这是因为在提交过程中页面的回发。

我已经用 onclick 和 onsubmit 进行了一番探索，但无济于事。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
function LoadIcon() {

$("#form1").click(function(){
 $('#loading').html("Loading please wait"); 
});
}
</script>
<form id="form1" name="form1" action="">   
<input name="button" onclick="LoadIcon()" id="button" type="submit"  value="Search Now">
</form>

<div id='loading'></div>
</body>
</html>

我希望页面提交和加载微调器按照此代码 sn-p 保持显示。

【问题讨论】：

标签： jquery html forms submit refresh

【解决方案1】：

^[1] 不要在带有onclick 的函数内使用事件。你可以在 -> 中的操作之间进行选择一个函数和 onclick 或 -> 使用下面示例中的事件

^[2] 将事件包装在$(function(){....}) 中，以便在文档准备好时运行代码

^[3] 表单使用submit 而不是click

^[4]使用e.preventDefault()防止表单默认重定向

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
//function LoadIcon() {
$(function(){
  $("#form1").on('submit',function(e){
    e.preventDefault();
   $('#loading').html("Loading please wait"); 
  });
});
//}
</script>
<form id="form1" name="form1" action="">   
<input name="button" id="button" type="submit"  value="Search Now">
</form>

<div id='loading'></div>
</body>
</html>

^[最后]如果您在表单中有输入，您可能需要使用ajax

【讨论】：