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

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

按钮标签应该是 div，根据这条评论：https://github.com/Semantic-Org/Semantic-UI/issues/3493#issuecomment-182349807

Answer 2

要防止 <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.

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

Semantic UI Button click causing additional page reload

jquery

semantic-ui