Question

我永远不会调用在提交表单时调用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>

Answer 1

您绝对不能在<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 documentation

$(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>

没有在表单提交上调用jQuery处理程序

1 个答案: