Question

当我尝试添加事件监听器以提交按钮时，我不明白什么是错的。我从页面“formLogin.php”加载表单，也许问题是，我无法从另一个页面的形式添加事件。

20.html

<!DOCTYPE html>
<html lang="es-ES"><html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="21-12-16.css">
        <script src="//code.jquery.com/jquery-latest.js"></script>

        <script src="20.js"></script>

        <title>Menu</title>

    </head>
    <body>

        <div id="header">
            <ul class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">LOGIN</a>
                    <ul>
                        <li><a href="" id="conect">Conect</a>
                            <ul>
                                <!--<li><a href="">Sub menu</a></li>-->
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
     <div id="response-container"></div>
    </body>
</html>

20.js

 $(document).ready(function(){

    function Login() {
       this.loadForm = function() {

          $("#response-container").load("formLogin.php");

          $( "#formLogin" ).submit(function( event ) {    //THIS CODE NOT WORKS
              alert( "Handler for .submit() called." );
              event.preventDefault();
          });     
       };

       this.searchData = function() {    
          getdetails( "1" )
          .done( function( response ) {
                if( response.success ) {
                       alert("Success");
                } else {
                }
          })
          .fail(function( jqXHR, textStatus, errorThrown ) {
                $("#response-container").html("fail");
          });
       };

       var getdetails = function(id){
          return $.getJSON( "20.php", { "id" : id });
       }
    };

    //LISTENERS
    $('#conect').click(function(e){
        e.preventDefault();
        var login= new Login();
        login.loadForm();
    });        
});

formLogin.php

<form id="formLogin" method="get" action="20.html">
USERNAME:<br><input type="text" name="username" /><br>
PASSWORD:<br><input type="password" name="password" /><br>

<br><input type="submit" value="Log in" name="login" id="btnInputLogin"/>
</form>

Answer 1

问题是，load()是异步的。这样，基于结果的任何行动都必须在其内部的回调函数中：

                                              // here's the difference
      $("#response-container").load("formLogin.php", function() {

         $( "#formLogin" ).submit(function( event ) {    //THIS CODE SHOULD NOW WORK
              alert( "Handler for .submit() called." );
              event.preventDefault();
         }); 
      });

简短说明：
您已经一次设置了一个事件，其中元素（#formLogin）尚未在DOM中，它仍然在加载。这就是回调函数的用途。一旦行动完成，它们就会被触发。

这里是docs

添加事件以提交按钮失败

1 个答案: