javascript - 获取在 HTML 按钮 OnClick 上触发的 jQuery 函数

标签 javascript jquery html events button

我有以下 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>

我无法让事件处理程序(在 jQuery 内)在用户按下“创建帐户”按钮时触发...

最佳答案

我立即发现三个问题:

  1. 您调用了 ready 两次(当您将函数传递给 $() 时,就像将函数传递给 $(document ).ready())。这在很大程度上是无害的,但完全没有必要。

  2. 按钮上 id 的属性会与下一个按钮相冲突;浏览器可能会忽略它:

    <input type ="button" id = "sb"value="Create Account"/>
    <!--                  ^^^^^^^^^ -->
    

    (如果需要,可以在 = 周围留有空格,但将 "sb" 塞入 value 可能行不通.)

  3. (可能偏离主题,也可能不是):您似乎(从引用的代码来看)正在成为 The Horror of Implicit Globals 的牺牲品。 。您可能应该声明您的 getmessage 变量。

所以:

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

<input type="button" id="sb" value="Create Account"/>

关于javascript - 获取在 HTML 按钮 OnClick 上触发的 jQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7064772/

相关文章:

javascript - 在 IFrame 中运行 Skrollr

javascript - 是否有像 php 这样的 javascript 服务器端解释器?

javascript - 如何使用 JavaScript 改变多个元素的 CSS

php - 我们如何在打印预览中添加CSS?

javascript - 来自 Bootstrap 表的基于 Ajax 的数据的数据单元格上的工具提示

php - 如何更改错误类(yii2 形式)

javascript - window.resize() 函数并返回脚本执行的事实

javascript - 如何使用默认值加载可能未定义的模板变量?

javascript - 使用组的 jQuery 对象选择比 $($ (".someclass")[i])) 更简单的方法?

javascript - 使用边框的带有右圆 Angular 箭头 css 的部分划分