Question

我目前遇到的一个问题是无法在提交按钮的onclick事件中调用函数。

$(document).ready(function() {
  function validate() {
    var contactName = document.getElementById("contact-name").value;
    alert("Thank you " + contactName);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="name">NAME</label>
  <input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
  <label for="email">EMAIL</label>
  <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
  <label for="email">MESSAGE</label>
  <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
</form>

<button type="button" id="submit" onclick="validate();">SUBMIT MESSAGE</button>

Answer 1

当加载DOM时，您应该将validate()函数在<{1}}之外的<{1}}写为绑定中的$(document).ready - 而{ {1}} 范围函数。

这意味着该函数是本地到闭包，如果在onclick内写入，则全局将不可见。

见下面的演示：

$(document).ready

$(document).ready

Answer 2

正如其他人所提到的，这里的问题是定义validate()函数的范围。

JavaScript是 "lexically scoped" ，这意味着声明的位置决定了其他代码可以到达的位置。

您的validate函数在匿名document.ready函数内声明（作用域）。这意味着可以“看到”validate的唯一位置是共享该范围的其他代码。 onclick=validate()行超出了该范围，这就是您的函数未被调用的原因。

但是，你应该删除validate()内联HTML事件，而不是将document.ready()函数移到onclick回调之外（从而使其成为全局，这是一件坏事）。属性，因为这是一种不好的做法（ see this ，原因有几个）并在脚本区域中执行事件绑定。这种方法允许您在与validate()函数相同的范围内设置事件并保持HTML清洁：

$(document).ready(function() {
  // Do your event binding in JavaScript, not as inline HTML event attributes:
  $("#submit").on("click", validate);

  // Now the event handler reference and the function are in the same scope
  function validate() {
    var contactName = document.getElementById("contact-name").value;
    alert("Thank you " + contactName);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="name">NAME</label>
  <input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
  <label for="email">EMAIL</label>
  <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
  <label for="email">MESSAGE</label>
  <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
</form>

<button type="button" id="submit">SUBMIT MESSAGE</button>

以下是关于 scope 的更多内容。

Answer 3

首先，你应该避免这样的内联处理程序。其次，取决于表单提交过程。你应该在<form>标签内有按钮。然后添加<form method="POST" action="/someurl/to/post/to">。

否则，使用jQuery和$.ajax()与click事件处理程序：

$('#submit').on('click', () {
  $.ajax({check properties in jquery api docs}, (result) => { 
      // do something 
    }, 
    (e) => { 
      // do something on error 
  })
})

onclick for button not call function

3 个答案: