Jquery-Skript funktioniert nicht in jquery geladene Seite

Question

Ich habe versucht, nach ähnlichen Fragen zu suchen, aber ich konnte nichts finden, also lassen Sie mich wissen, wenn Sie ähnliche Fragen wissen.

Lassen Sie mich erklären, was ich mache: Ich habe ein Skript, das Formulare in einer js-Datei validiert, Es funktioniert gut in jeder Seite mit einem Formular, das ich habe, das Problem ist, dass wenn ich ein Formular mit jquery laden tut es einfach nicht ‚t Arbeit, ich habe versucht, die nächste Zeile an verschiedenen Orten mit: Header, footer, etc.

<script src='myFile.js'></script> 

bei weitem das einzige, was für schreibt die Codezeile oben in der Form selbst gearbeitet hat. Ich denke, es hat etwas mit der Form zu tun, dass das DOM funktioniert, ich habe auch versucht, es zu verwenden und nicht zu verwenden.

Es funktioniert nur, wenn ich das Skript-Tag mit dem src-Attribut innerhalb des Formulars selbst hinzufügen.

Es wäre kein großes Problem für mich, das Skript-Tag zu jeder Form hinzuzufügen, die ich mit jquery lade, aber es ist ein bisschen mehr Arbeit und uneffizient, und auch wenn ich das Skript-Tag zu einem Formular hinzufügen und laden Mit Ajax bekomme ich die nächste Konsole Warnung, die nur verschwindet, wenn ich das Skript-Tag aus der Formulardatei entfernen:

jquery-3.2.1.min.js: 4 [Deprecation] synchrone XMLHttpRequest auf dem Hauptthread ist veraltet, weil seiner nachteiligen Auswirkungen auf die Erfahrung des Endbenutzers. Weitere Informationen finden Sie unter https://xhr.spec.whatwg.org/.

Hier ist ein Teil meines Code:

<!--home.html--> 
<div id='formFrame'> 
</div> 

<script> 

    $("#formFrame").load("html/loginForm.html"); 

</script> 
<!--end of home.html--> 

<!--loginForm.html--> 
<form action='somePage.php' method='post' id='loginForm'> 
    <input type='email' name='email' placeholder='email'> 
    <input type='password' name='password' placeholder='password'> 
    <input type='submit' name='submit' value='Login'> 
</form> 
<script src='js/validate.js'></script> 
<!--end of loginForm.html--> 

<!--validation script (validate.js)--> 
$(document).ready(function(){ 
    $("#loginForm").submit(function (e){ 
     e.preventDefault(); 
     alert("Working"); 
    }); 
}); 

Dank für die bei der Lektüre dieser einige Ihrer wertvollen Zeit zu verbringen, ich es zu schätzen weiß viel!

Answer 1

Nun Jungs fand ich eine Lösung:

Wie es scheint, einen Konflikt zu sein, wenn eine externe Seite mit Ajax (.load) Laden ich php statt Javascript verwenden entschieden, die gut funktioniert:

ich entfernte den nächsten Code

<script> 

    $("#formFrame").load("html/loginForm.html"); 

</script> 

Und fügte der neben dem div wo ich möchte, dass meine Inhalte laden:

<!--home.php (changed html to php)--> 
<div id='formFrame'> 
    <?php 
     require 'html/loginForm.html'; 
    ?> 
</div> 

Ich hätte lieber die Load-Methode von Ajax zu verwenden, die Inhalte zu vermeiden Laden befere der Benutzer es wünschen könnte, aber bei weitem das ist die einzige Lösung, die ich habe, um darüber nachzudenken kann. Danke an alle für Ihre Hilfe, es war sehr hilfreich!

Answer 2

Da kann ich nicht kommentieren, meinen Kommentar in Antwort!

Ich bin mir nicht sicher, was Sie in validate.js geschrieben haben, aber wenn Sie jQuery unaufdringliche Validierung verwenden, müssen Sie die Validatoren an das Formular binden, wenn Sie es dynamisch laden.

Ich hatte das gleiche Problem in ASP.NET MVC beim Laden von Formularen mit AJAX. Ich bin nicht sicher, ob es dir helfen wird oder nicht, aber unten ist der Code.

$("#formFrame").load("html/loginForm.html", function(){ 
    var $form = $("formSelector"); 
    $form.removeData('validator'); 
    $form.removeData('unobtrusiveValidation'); 
    $.validator.unobtrusive.parse($form); 
});