Ereignis zum Senden der Schaltfläche hinzufügen fehlgeschlagen

Ich verstehe nicht, was falsch ist, wenn ich versuche, Ereignis-Listener zum Senden der Schaltfläche hinzuzufügen. Ich lade das Formular von der Seite "formLogin.php", vielleicht ist das Problem, dass ich Ereignis von einer Form einer anderen Seite hinzufügen kann.Ereignis zum Senden der Schaltfläche hinzufügen fehlgeschlagen

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>

Quelle

2017-01-13 Sergio Diaz

wie ist 'formLogin.php' verbunden? – Jeff

@Jeff Sorry, wenn ich Ihre Frage nicht verstehe, ich bin nicht in lokalen Server, ich benutze ein Hosting, lädt das Formular perfekt, aber das Ereignis wird nicht zum Formular hinzugefügt. –

Sie haben 3 Dateien, 2 davon sind verbunden, weil Sie die js in den HTML-Code einfügen. 'formLogin.php' ist nicht mit den anderen verbunden (zumindest sehen wir es nicht). Die js-Datei muss in formLogin.php eingebunden/eingebunden sein, um zu arbeiten. – Jeff

Ihr Problem ist, dass load() asynchron ist. Die meens, dass jede Aktion basierend auf dem Ergebnis sein, hat im Inneren Callback-Funktion ist:

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

Kurze Erklärung:
Sie haben eine zu einem Zeitpunkt eventlistened eingestellt, in dem das Element (#formLogin) war noch nicht im DOM, es wurde noch geladen. Dafür gibt es Callback-Funktionen. Sie werden ausgelöst, sobald die Aktion abgeschlossen ist.

Hier ist der docs

Quelle

2017-01-13 01:25:14 Jeff

vielen Dank, Bruder, du rettest mein Leben, ich bin ein dummer Noob. Ich schätze deine Hilfe so sehr. Ich muss dann mehr über Callback-Funktionen lernen, weil die Zeit, die ich mit ihnen arbeite, ich weiß nicht, ob das eine gute Praxis oder schlecht ist. –

Gern geschehen. Ja, es ist eine gute Übung! Und wenn meine Antwort dir geholfen hat, kannst du es akzeptieren! – Jeff

Ereignis zum Senden der Schaltfläche hinzufügen fehlgeschlagen

Antwort

Verwandte Themen