javascript 获取 jQuery 函数以在 HTML Button OnClick 上触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7064772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get jQuery function to trigger on HTML Button OnClick
提问by user559142
I have the following HTML/JQuery:
我有以下 HTML/JQuery：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login</title>
<script src="jQuery.js"></script>
<script>
$(document).ready(function(){
$(function(){
$("#sb").click(function(e){
e.preventDefault();
getmessage = "Yes";
getmessage = encodeURIComponent(getmessage);//url encodes data
$.ajax({
type: "POST",
url: "get_login.php",
data: {'getmessage': getmessage},
dataType: "json",
success: function(data) {
$("#message_ajax").html("<div class='successMessage'>" + data.message +"</div>");
}
});
});
});
});
</script>
</head>
<body>
<h1>Login</h1>
<p>Please enter your e-mail and password</p>
<form name = "loginform" action = "http://dev.speechlink.co.uk/David/get_login.php" method = "post">
<p>E-mail<input name = "username" type="text" size="25"/><label id ="emailStatus"></label></p>
<p>Password<input name = "password" type="text" size="25"/><label id ="passwordStatus"></label></p>
<p><input type="hidden" name="usertype" value = "SupportStaff" /></p>
<p>><input type ="button" id = "sb"value="Create Account"/></p>
</form>
<div id = "message_ajax"></div>
</body>
</html>
I cannot get the event handler (within the jQuery) to trigger upon the user pressing the 'Create Account' button...
我无法在用户按下“创建帐户”按钮时触发事件处理程序（在 jQuery 中）...
回答by T.J. Crowder
I see three issues off-the-bat:
我立即看到了三个问题：
You're calling
readytwice (when you pass a function into$(), it's just like passing a function into$(document).ready()). This is largely harmless, but completely unnecessary.Your attribute for the
idon the button is rammed up against the next; it's possible the browser is ignoring it:<input type ="button" id = "sb"value="Create Account"/> <!-- ^^^^^^^^^ -->(It's fine to have spaces around the
=if you want, but having the"sb"rammed up intovaluemay not work.)(Possibly off-topic, possibly not): You seem (from the quoted code) to be falling prey to The Horror of Implicit Globals. You should probably declare your
getmessagevariable.
您调用了
ready两次（当您将函数传递给 时$()，就像将函数传递给 一样$(document).ready()）。这在很大程度上是无害的，但完全没有必要。您
id在按钮上的属性与下一个冲突；浏览器可能会忽略它：<input type ="button" id = "sb"value="Create Account"/> <!-- ^^^^^^^^^ -->（
=如果您愿意，可以在周围"sb"留出空间，但将其塞入value可能行不通。）（可能偏离主题，也可能不是）：您似乎（从引用的代码中）成为了隐式全局的恐怖的牺牲品。您可能应该声明您的
getmessage变量。
So:
所以：
<script>
$(document).ready(function(){
// Removed the unnecessary `$(function() { ...` here and the matching closing bits at the end
$("#sb").click(function(e){
e.preventDefault();
var getmessage = "Yes"; // <== Added `var`
getmessage = encodeURIComponent(getmessage);//url encodes data
$.ajax({
type: "POST",
url: "get_login.php",
data: {'getmessage': getmessage},
dataType: "json",
success: function(data) {
$("#message_ajax").html("<div class='successMessage'>" + data.message +"</div>");
}
});
});
});
</script>
and
和
<input type="button" id="sb" value="Create Account"/>
回答by JohnJohnGa
You html is not good:
你的html不好：
<p>><input type ="button" id = "sb" value="Create Account"/></p>
<p>><input type ="button" id = "sb" value="Create Account"/></p>
should be
应该
<p><input type ="button" id="sb" value="Create Account"/></p>
<p><input type ="button" id="sb" value="Create Account"/></p>
