Question

当输入电子邮件地址并单击提交按钮时，alert('jquery');会被执行，我会看到警报。 但我没有看到“提交表单”的提醒，并立即提供request.php页面。我做错了什么？

HTML片段：

<form class="form-signin" role="form" id="emailform" action="request.php" method="post"
  name="emailform">
    <input type="email" id="email" name="email" required="" /> <button name="submit"
    class="btn btn-lg btn-primary btn-block" type="submit">Get New Code</button>
</form>

Jquery片段：

<script>
    $(document).ready(function() {
        alert('jquery'); // this alert is called properly
        $("#emailform").submit(function(event) {

            alert('submitting the form'); // this is not getting called on click of the submit button
            event.preventDefault();

            var $form = $(this),
                url = $form.attr('action');
            alert(url);
            $.post(url, {
                    param1: $("#email").val()
                })
                .success(function(data) {
                    if (data == "found") {}
                });
        });
    });
</script>

编辑： 我上面使用的措辞不正确，我正在更改它，感谢@PeterKA

“加载页面时会执行alert('jquery');，我会看到警告。但是当输入电子邮件地址并单击提交按钮时，alert('submitting the form');没有被执行”< / p>

Answer 1

您的代码没有任何问题;只有你误报了什么时候发出警报。请参阅以下演示中的注释。运行演示以确认您的代码按预期工作。

    $(document).ready(function() {
        
        //THIS ALERT FIRES WHEN THE PAGE LOADS
        //NOT WHEN A BUTTON IS CLICKED
        alert('jquery');
      
        $("#emailform").submit(function(event) {
            
            //THIS ALERT FIRES WHEN THE SUBMIT BUTTON IS CLICK
            //OR WHEN THE SUBMIT EVENT IS TRIGGERED THROUGH SOME OTHER MEANS
            alert('submitting the form');
          
            event.preventDefault();

            /*var $form = $(this),
                url = $form.attr('action');
            alert(url);
            $.post(url, {
                    param1: $("#email").val()
                })
                .success(function(data) {
                    if (data == "found") {}
                });*/
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-signin" role="form" id="emailform" action="request.php" method="post"
  name="emailform">
    <input type="email" id="email" name="email" required="" /> <button name="submit"
    class="btn btn-lg btn-primary btn-block" type="submit">Get New Code</button>
</form>

Answer 2

        <!DOCTYPE HTML>
        <html>
        <title>Tester</title>
        <head>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>





 <script type="text/javascript">

$(document).ready(function() {
        alert('jquery'); // this alert is called properly
        $("#emailform").submit(function(event) {
            alert("hello this ready for submit");
           return false;
        });
    });

 </script>          


        </head>
        <body>

           <form class="form-signin" role="form" id="emailform" action="request.php" method="post"
  name="emailform">
    <input type="email" id="email" name="email" required="" /> <button name="submit"
    class="btn btn-lg btn-primary btn-block" type="submit">Get New Code</button>
</form>

        </body>
        </html>

在表单提交时未正确调用jquery函数

2 个答案: