1

テスト用に使用している、必須フィールドが 1 つある単純なフォームがあります。初めてクリックして送信すると、期待どおりにアラートがポップアップ表示されますが、最初の 2 回目以降はポップアップしません。ポップアップを表示するには、ページをリロードする必要があります。なぜこれが起こっているのかを誰かが理解するのを手伝ってくれますか?

前もって感謝します。RD

コード：

<!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