按鈕未調用功能的onclick

Question

我目前遇到的問題之一是無法在onclick按鈕的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

你應該寫validate()的函數外 $(document).ready作為onclick中綁定的DOM負載時 -而$(document).ready 作用域的功能。

這意味着該函數對於閉包是局部的 ，並且如果在$(document).ready內部編寫該函數，則該函數將不會全局可見。

請參見下面的演示：

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

 <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 2

正如其他人所提到的，這里的問題是validate()函數的定義范圍。

JavaScript是“按詞法定義的” ，這意味着聲明的位置決定了其他代碼可以從何處訪問聲明。

您的validate函數在匿名document.ready函數內部聲明（作用域為）。 這意味着可以“看到” validate的唯一地方是共享該范圍的其他代碼。 onclick=validate()行不在該范圍內，因此未調用您的函數。

但是，不要將validate()函數移到document.ready()回調之外（因此使其成為全局變量，這是一件壞事），實際上應該刪除onclick內聯HTML事件屬性，因為這是一個不好的做法（ 請參見這有幾個原因），然后在腳本區域中進行事件綁定。 這種方法將使您可以在與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> 

在范圍上還有更多。

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 
  })
})