无法在 html 中使用 onClick 调用 jquery 函数

Posted 2023-05-09

【中文标题】无法在 html 中使用 onClick 调用 jquery 函数

【英文标题】：Cannot call jquery function using onClick in html

【发布时间】：2015-07-20 05:43:18

【问题描述】：

我正在尝试实现登录功能。我在我的 login.html 中使用表单，当用户单击按钮时，它应该检查字段是否不为空，然后使用 php 检查用户是否存在于数据库中。我添加了对 main.js 的引用

我收到以下错误：Uncaught ReferenceError: submitForm is not definedkontroller.php:89 onclick

登录.html

 <div id="loginForm">
            <form id="loginSubmit" action="?mode=validate">

                <h2>LOGIN</h2>

                <h2>Username</h2>

                <div class="loginButton">
                    <input type="text" id="user" name="username" placeholder="username">
                </div>              

                <h2>Password</h2>

                <div class="loginButton">
                   <input type="password" id="pass" name="password" placeholder="password">
                </div>

            </form>


        </div>

        <div>
            <button class="btn btn-info" onclick="submitForm()">login</button>
        </div> 

main.js

$( document ).ready(function() 

 ...

function submitForm()

    console.log("in submitForm");
    console.log($("#user").val());

  if ($("#user").val() == "")
     $("#user").addClass("red");
  

  $("#user").blur(function() 
      $(this).removeClass("red");             
  );                           

  if($("#pass").val() == "")
     $("#pass").addClass("red");
  

  $("#pass").blur(function() 
      $(this).removeClass("red");    
  );

  if( $("#pass").val() != ""  && $("user").val() != "" )
        console.log("values are not empty");
       $("#loginSubmit").submit();
  
  return false;



); 

【问题讨论】：

在我的回答中发布了一个有效的小提琴链接

【参考方案1】：

将 submitForm() 函数排除在外

$( document ).ready(function()  );

把函数放在它下面

【参考方案2】：

或者您可以在移除 html 元素上的 onclick 事件的同时为按钮创建 id：

<button class="btn btn-info" id="submit">login</button>

然后，就可以使用jquery来处理点击事件了：

 $('#submit').click(function () 
 //working codes
 );

就是这样！

【参考方案3】：

这会起作用的......

http://jsfiddle.net/incept0/tvrm4c0o/2/

您的这一行没有用户 ID 的井号。所以修复它。

if( $("#pass").val() != "" && $("user").val() != "")

HTML

 <button class="btn btn-info" onclick="$(this).submitForm();">login</button>

JQUERY

   (function($)

      $(function()  
        //document ready

      );

      $.fn.submitForm = function() 

          console.log("in submitForm");
          console.log($("#user").val());

          if ($("#user").val() == "")
              $("#user").addClass("red");
          

          $("#user").blur(function() 
              $(this).removeClass("red");             
          );                           

          if($("#pass").val() == "")
              $("#pass").addClass("red");
          

          $("#pass").blur(function() 
              $(this).removeClass("red");    
          );

          if( $("#pass").val() != ""  && $("#user").val() != "" )
             console.log("values are not empty");
             $("#loginSubmit").submit();
          

          return false;
      ;

   )(jQuery); 

但老实说，我看到您正在尝试验证此处的输入。一旦触发 onclick，您将遇到更多问题，所以让我为您省去麻烦，并向您展示我一直这样做的方式。我觉得这是最好的方法。但我对任何可以向我展示更好方法的人都持开放态度。

将模糊事件从函数中移除。

将代码移至文档就绪部分

使用 $("input").is(':visible').on('blur', function()

检查每个模糊的值和类

根据值和现有类添加或删除红色类

现在，当他们模糊输入时，它将检查值并在适当时变为红色。你也可以使用.on('change', function() ，所以如果他们不改变值，它就不会触发事件。

  (function($)    
      $(function()  
          //document ready
          $("input").filter(':visible').blur(function() 
              if ($(this).hasClass('red') && $(this).val() !== "")) 
                  $(this).removeClass('red');
               else if (!$(this).hasClass('red') && $(this).val() === "") 
                  $(this).addClass('red');                     
              
          );
      );            
   )(jQuery); 

接下来将其添加到您的 html 中

<input style="display: none;" type="submit" id="submitHidden" value="hidden">

如果所有内容都检查完毕，则使用它进行提交...这样您就不会遇到 .preventDefault() 的任何问题，因为您不需要使用它。

$("#submitHidden").trigger('click');

或者如果你想变得超级酷。设置超时以在 500-750 毫秒空闲后检查他们的输入并使用 ajax 进行身份验证，如果登录成功，请登录。如果您也可以删除登录按钮会很好，但如果他们意外输入了无效密码将只是坐在那里，因此他们仍然需要能够在输入无效凭据的情况下提交。

     function startTimer() 
         $(document).keyup(function(e) 
             clearTimeout(window.timer);
             window.timer = setTimeout(function() 
                console.log('ajaxSubmit');
                 if (ajaxAuthenticate()) 
                     alert("auto login in progress...");
                 
             , 2000);
         );

         $(document).mouseup(function(e)  
            clearTimeout(window.timer); 
         );
     ;

     $("input").filter(':visible').on('focus', function() 
         startTimer();
     ); 

这就是我个人将如何编写您的提交表单功能...

     $.fn.submitForm = function() 

         $("input").filter(':visible').on("happy", function() 
             if ($(this).val() === "") 
                 $(this).addClass('red');
             
         );

         $("input").filter(':visible').trigger("happy");  

         if( $("#pass").val() !== ""  && $("#user").val() !== "" )
             $("#submitHidden").trigger('click');
         
    

这是我的实际版本（自动登录）。尝试使用用户名“test”和密码“test”，然后不要点击登录按钮，稍等片刻。

FIDDLE (autologin version)