表单提交时未调用jQuery处理程序

jQuery handler not being called on form submit

本文关键字：处理 程序 jQuery 调用 表单提交      更新时间：2023-09-26

在提交表单时调用jquery函数的代码从未被调用。我一遍又一遍地检查了代码的格式，一切似乎都很正常。

知道怎么解决这个问题吗？感谢

HTML:

<form class="form" role="form" id="experimentform">
    <label for="name">Study Name</label>
    <input class="form-control" type="text" name="name" placeholder="Experiment Name" id="name">
    <label for="description">Study Description</label>
    <textarea class="form-control" name="description" rows="4" cols="20" id="description" placeholder="description"></textarea>
    <label for="numparticipants">Number of Participants</label>
    <input class="form-control" type="number" name="numparticipants" id="numparticipants">
    <input class="btn btn-success" type="submit" name="submit" value="Create">
</form>

jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  $(document).ready(function() {
    $("#experimentform").submit(function(event) {
      alert( "Handler for .submit() called." );
      event.preventDefault();
    });
  });
</script>

您绝对不能在<script></script>标记之间放置代码，同时在同一<script>标记中包含外部文件。

应该是…

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#experimentform").submit(function(event) {
            event.preventDefault();
            alert( "Handler for .submit() called." );
        });
    });
</script>

注意：通常，.preventDefault()是函数中的第一个项。请参阅：event.preventdefault文档

$(document).ready(function() {
  $("#experimentform").submit(function(event) {
    event.preventDefault();
    alert("Handler for .submit() called.");
  });
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form" role="form" id="experimentform">
    <label for="name">Study Name</label>
    <input class="form-control" type="text" name="name" placeholder="Experiment Name" id="name">
    <label for="description">Study Description</label>
    <textarea class="form-control" name="description" rows="4" cols="20" id="description" placeholder="description"></textarea>
    <label for="numparticipants">Number of Participants</label>
    <input class="form-control" type="number" name="numparticipants" id="numparticipants">
    <input class="btn btn-success" type="submit" name="submit" value="Create">
</form>

相关文章：