1

我有一个用于测试的简单表格，其中包含一个必填字段。我第一次点击提交时，警报按预期弹出，但第一次之后就再也没有弹出过。我必须重新加载页面才能显示弹出窗口。有人可以帮我理解为什么会这样吗？

提前致谢。研发

代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Mobile Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css" />
    <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.1.js"></script>

<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#addSpEvent').submit(function ()
        {
            alert("form submit clicked");
        });
    });
</script>

</head> 
<body> 

<div data-role="page" page-id="addSports">

    <div data-role="header">
        <h1>Header goes here</h1>
    </div><!-- /header -->

    <div data-role="content">
    <form id="addSpEvent" action="addSports.html" method="post">
        <div id="spevSched" data-role="fieldcontain" data-mini="true">
            <label for="spevDate">Date</label>
            <input id="spevDate" type="date" required />
            <label for="spevLocation">Location</label>
            <input id="spevLocation" type="text" />
            <input id="addSpEvent" name="addSpEvent" type="submit" value="Add" />
        </div>
    </form>
    </div><!-- /content -->

    <div data-role="footer">    
        <h3>Footer goes here</h3>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>
4

0 回答 0