添加事件提交按钮失败

我不明白当我尝试添加事件侦听器提交按钮时出现了什么问题。我从页面“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>

来源

2017-01-13 Sergio Diaz

“formLogin.php”是如何连接的？ – Jeff

@Jeff对不起，如果我不明白你的问题，即时通讯不在本地服务器，即时通讯使用托管，表单加载完美，但事件不会添加到窗体。 –

您有3个文件，其中2个连接，因为您将js包含在html中。 'formLogin.php'没有连接到其他人（至少我们没有看到它）。该js文件必须包括/连接到形式Login.php工作 – Jeff

你的问题是，load()是异步的。这meens，即根据结果采取任何行动必须是它里面的回调函数：

           // 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(); 
     }); 
     });

简短说明：
你已经设定在时间eventlistened中，元素（#formLogin）是还没有在DOM中，它仍然在加载。这就是回调函数的用途。一旦行动完成，他们就会被触发。

这是docs

来源

2017-01-13 01:25:14 Jeff

非常感谢你的兄弟，你救了我的命，我是一个傻傻的小白。我非常赞赏你的帮助。因此，我需要更多地了解回调函数，因为在与他们合作的时候，我不知道这是一种好的做法还是不好的。 –

不客气。是的，这是很好的做法！如果我的答案帮助你接受它！ – Jeff

添加事件提交按钮失败

回答

相关问题