添加事件提交按鈕失敗

我不明白當我嘗試添加事件偵聽器提交按鈕時出現了什麼問題。我從頁面「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

添加事件提交按鈕失敗

回答

相關問題