送信ボタンにイベントを追加すると失敗する

ボタンを送信するイベントリスナーを追加しようとすると何が問題なのか分かりません。私はページ "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申し訳ありませんが、あなたの質問を理解していない場合は、私はローカルサーバーではない、私はホスティングを使用して、完全にフォームの読み込みが、イベントがフォームに追加されていません。 –

あなたはhtmlにjsを含めるので、3つのファイルがあり、それらのうち2つは接続されています。 'formLogin.php'は他の人に接続されていません（少なくとも私たちはそれを見ません）。 jsファイルはformLogin.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(); 
     }); 
     });

短い説明：
要素（#formLogin）があった場所あなたは、一度にeventlistened設定しましたまだDOMにはないが、まだ読み込んでいた。これがコールバック関数の目的です。アクションが完了すると、それらはトリガされます。

ここをクリックしてくださいdocs

出典

2017-01-13 01:25:14 Jeff

仲間に非常にマッチしてくれてありがとう、私の人生を保存する、私はばかなnoobです。私はあなたの助けを非常に感謝します。コールバック関数についてもっと知る必要があります。なぜなら、私がそれらと一緒に作業しているので、それが良い練習か悪いか分かりません。 –

ようこそ。はい、それは良い習慣です！私の答えが助けてくれたら、それを受け入れることができます！ – Jeff

送信ボタンにイベントを追加すると失敗する

答えて

関連する問題