Question

我正在探索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按钮后，页面将在显示警报消息后再次重新加载。

我在哪里弄错了？

Answer 1

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

<button> HTML | MDN的摘录：

<强>型

按钮的类型。可能的值有：


submit：该按钮将表单数据提交给服务器。 如果未指定属性，则为默认值，或者属性动态更改为空值或无效值。

reset：该按钮会将所有控件重置为初始值。

button：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些事件在事件发生时触发。

menu：该按钮打开一个通过其指定的＆lt; menu＆gt;定义的弹出菜单。元件。

Answer 2

根据此评论，按钮标记应为div：https://github.com/Semantic-Org/Semantic-UI/issues/3493#issuecomment-182349807

语义UI按钮单击导致其他页面重新加载

2 个答案: