console.log 不起作用[重复]

Question

可能很简单。当我单击我创建的表单中的提交按钮时，我应该在控制台上看到“单击”消息，但它没有出现。任何想法为什么会发生这种情况？

$("#button").on("click", function() {
  console.log("clicked");
  return false;
});

<div class="col-md-8">
  <form>
    <div class="form-group">
      <label for="name" class="sr-only">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
    </div>
    <div class="form-group">
      <label for="email" class="sr-only">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
    </div>
    <label for="textBox" class="sr-only">TextBox</label>
    <textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
    <button type="submit" class="btn btn-default" id="button">Submit</button>

  </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 1

$ 函数仅由 jQuery 定义。您需要包含 jQuery 才能使其正常工作。

$("#button").on("click", function() {
  console.log("clicked");
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8">
  <form>
    <div class="form-group">
      <label for="name" class="sr-only">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Your name here" maxlength="20">
    </div>
    <div class="form-group">
      <label for="email" class="sr-only">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Your email here*" required="required">
    </div>
    <label for="textBox" class="sr-only">TextBox</label>
    <textarea class="form-control message-box" id="textBox" style="resize:none" cols="40" rows="5" placeholder="Your message here" minlength="20"></textarea>
    <button type="submit" class="btn btn-default" id="button">Submit</button>

  </form>

添加 jQuery 在这里工作。