gpt4 book ai didi

jquery - 单击语义 UI 按钮会导致额外的页面重新加载

转载 作者:行者123 更新时间:2023-12-01 00:47:28 24 4
gpt4 key购买 nike

我刚刚在语义 UI 上进行探索,我在表单中遇到了一个按钮单击事件,并且我目睹了一种奇怪的行为。

Demo

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8" />
<title>Semantic UI CDN</title>
<link rel="stylesheet" href="semantic.css" />
<script src="jquery.min.js"></script>
<script src="semantic.js"></script>
</head>

<body style="margin:1em;">
<!-- Your Semantic UI Code -->
<br/><br/>

<h1 class="ui center aligned icon header">
First Form
</h1>

<form class="ui form" style="">

<div class="inline fields" id="ir_num_row_div">
<div class="three wide field required">
<label>Name</label>
</div>
<div class="five wide field">
<input type="text" id="name" placeholder="Your good name goes here..">
</div>
</div>


<div class="inline fields">
<div class="three wide field required">
<label>Place</label>
</div>
<div style="width: 290px;">
<input type="text" placeholder="Where are you from ?">
</div>

<button style="margin:1em;" class="ui primary button" id="btn_validate">Validate</button>

</div>

</form>
<script type="text/javascript">

$("#btn_validate").click(function(){
alert("you clicked me");
// Why page reloading here ?...
});

</script>
</body>

</html>

单击验证按钮后,页面将在显示警报消息后重新加载。

我在哪里犯了错误?

最佳答案

防止<button>提交表单的元素,您需要添加 type="button"属性。

摘自<button> HTML | MDN :

type

The type of the button. Possible values are:

  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  • reset: The button resets all the controls to their initial values.
  • button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
  • menu: The button opens a popup menu defined via its designated <menu> element.

关于jquery - 单击语义 UI 按钮会导致额外的页面重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43030442/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com