jQuery脚本在加载的jQuery页面中不起作用

Question

I have tried to search for similar questions, but I could not find anything, so if you know any similar question please let me know.

Let me explain what Im doing: I have a script that validates forms in a js file, It works fine in any page with a form I have, the problem is that when I load a form using jquery it just doesn't work, I have tried using the next line in different places: Header, footer, etc

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

By far the only thing that has worked for is writing the line of code above inside the form itself. I think it has something to do with the form that the DOM works, I have also tried using and not using it.

$(document).ready(function (){ //code});

It only will work when I add the script tag with the src attribute inside the form itself.

It would not represent a big problem for me to add the script tag to any form I load using jquery but it's a little bit more of work an unefficient, and also when I add the script tag to any form and load it using ajax I get the next console warning that only goes away when I remove the script tag from the form file:

jquery-3.2.1.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/ .

Here is a part of my 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");
    });
});

Thanks for spending some of your valuable time on reading this, I appreciate it a lot!

Answer 1

As I can't comment, putting my comment in answer!

I am not sure what you have written in validate.js, but if you are using jQuery unobtrusive validation, then you must rebind the validators to the form if you are loading it dynamically.

I was facing same issue in ASP.NET MVC while loading forms using AJAX. I am not sure will it help you or not but below is the code.

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

Answer 2

Well guys I found a solution:

As there seems to be a conflict when loading an external page using ajax (.load) I opted to use php instead of javascript which worked fine:

I removed the next code

<script>

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

</script>

And added the next to the div where I want to load my content:

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

I would have prefered to use the load method from ajax to avoid loading the content befere the user could request it, but by far that's the only solution I have been able to think about. Thanks to everybody for your help it was really helpful!