Semantic按钮单击会导致额外的页面重新加载
Semantic按钮单击会导致额外的页面重新加载
提问于 2017-03-26 15:07:25
我只是在Semantic UI上探索，我在一种形式中遇到了一个按钮点击事件，我看到了一个奇怪的行为。
<!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>单击Validate按钮后，页面将在显示警报消息后重新加载。
我在哪里搞错了？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-27 14:10:53
为了防止<button>元素提交表单，您需要添加一个type="button"属性。
HTML = MDN提取液
型 按钮的类型。可能的价值是：
submit：按钮将表单数据提交给服务器。如果属性没有指定，或者属性被动态更改为空值或无效值，则这是默认的。reset：按钮将所有控件重置为它们的初始值。button：按钮没有默认行为。它可以有与元素的事件相关联的客户端脚本，这些脚本在事件发生时被触发。menu：该按钮打开通过其指定元素定义的弹出菜单。
Stack Overflow用户
发布于 2017-03-26 15:30:23
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43030442
复制相关文章
相似问题
腾讯云开发者
