Jquery 脚本在 jquery 加载页面中不起作用答案

【问题标题】：Jquery script doesn't work in jquery loaded pageJquery 脚本在 jquery 加载页面中不起作用
【发布时间】：2017-05-05 03:28:05
【问题描述】：

我试图搜索类似的问题，但我找不到任何东西，所以如果您知道任何类似的问题，请告诉我。

让我解释一下我在做什么：我有一个脚本可以验证 js 文件中的表单，它在我拥有的表单的任何页面中都可以正常工作，问题是当我使用 jquery 加载表单时它不起作用，我尝试使用下一行不同的地方：页眉、页脚等

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

到目前为止，唯一有效的方法是在表单本身内部编写上面的代码行。我认为这与DOM工作的形式有关，我也尝试过使用和不使用它。

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

只有当我在表单本身中添加带有 src 属性的脚本标签时它才会起作用。

将脚本标签添加到我使用 jquery 加载的任何表单对我来说不是一个大问题，但它的工作效率更高，而且当我将脚本标签添加到任何表单并使用加载它时ajax 我得到下一个控制台警告，只有当我从表单文件中删除脚本标记时才会消失：

jquery-3.2.1.min.js:4 [弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

这是我的代码的一部分：

<!--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");
    });
});

感谢您抽出宝贵的时间阅读本文，非常感谢！

【问题讨论】：

你需要把 $(document).ready 放在脚本标签中。
感谢您的回答 Nair，$(document).ready 已经写在我的脚本标签 (validate.js) 中，我想我可能误解了您，请您指出确切的位置是吗？
$("#formFrame").load("html/loginForm.html"); 我认为您正在尝试加载一个尚不存在的元素。您可以使用 .ready() 但为什么不将 .load() 行与您已有的 ready() 放在同一块中？
你需要把脚本按正确的顺序排列。如果你需要在jquery中调用一个函数你需要先加载jquery
你好，杰森，谢谢，我试过了，但我没有运气，我尝试在你写 abobe 的行中添加 $(document).ready 但那行不通，还尝试做同样的事情并删除脚本文件中的 ready 语句，但这也不起作用，并且导致其他元素不再起作用，我认为答案更多地与逻辑而不是语法有关，因为正如我之前所说的脚本运行良好，问题是当我尝试在使用 ajax 加载的表单上使用脚本时。我非常感谢你们为我提供的帮助。谢谢，我希望我们能尽快解决这个问题:)。

标签： javascript jquery

【解决方案1】：

由于我无法发表评论，所以将我的评论作为答案！

我不确定你在 validate.js 中写了什么，但如果你使用 jQuery 非侵入式验证，那么如果你动态加载它，你必须将验证器重新绑定到表单。

在使用 AJAX 加载表单时，我在 ASP.NET MVC 中遇到了同样的问题。我不确定它是否会帮助你，但下面是代码。

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

【讨论】：

感谢您的回答，不幸的是我没有使用 jQuery 不显眼的验证或任何插件，我使用的是 jquery :(，我正在考虑一个可能的解决方案，如果它有效，我会回答我自己的问题。谢谢反正人！
哦！希望您可能的解决方案能够奏效！同时，如果您还可以将 validate.js 中的一些代码放入问题中，那就太好了！谢谢。
感谢您的愿望，我添加了一个对我有用的 aswer，感谢您的时间！

【解决方案2】：

伙计们，我找到了解决方案：

由于使用 ajax (.load) 加载外部页面时似乎存在冲突，我选择使用 php 而不是 javascript，它工作正常：

我删除了下一个代码

<script>

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

</script>

并在我要加载内容的 div 旁边添加：

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

我更愿意使用 ajax 的 load 方法来避免在用户请求之前加载内容，但到目前为止，这是我能想到的唯一解决方案。感谢大家的帮助，真的很有帮助！

【讨论】：