javascript - 如何等到所有页面加载后才获取这些页面的元素？

Question

<div id="validationPages">
    <div id="page1Div"></div>
    <div id="page2Div"></div>
    <div id="page3Div"></div>
    <div id="page4Div"></div>
</div>

<script type="text/javascript">
    $( "#page1Div" ).load( "page1.html");
    $( "#page2Div" ).load( "page2.html");
    $( "#page3Div" ).load( "page3.html");
    $( "#page4Div" ).load( "page4.html");

    alert($("#validationPages").find("input[type=text]").length);
    $("#validationPages").find("input[type=text]").validate();
</script>

这里我在四个 div 中加载四个 html 页面。这些页面各有一些输入字段，这些输入字段在 ajax 调用中填充了来自数据库的值。

例如:page1.html:

$.ajax({
    type: 'POST',
    url:  "GetAmount",
    success: function(data, textStatus, xhr){
        $("#amount").val(data.amount);
    }
});

在我填写所有这些输入字段后，我想将它们传递给一个名为 validate() 的函数来验证。

在我的代码警报中，输入字段的总长度为“0”，我如何等到所有页面都加载了值，以便我可以将它们传递给 validate() 函数？

-> $(document).ready() 不工作。

Answer 1

Try this code.




<script type="text/javascript">
    $( "#page1Div" ).load( "page1.html", function(){
          $( "#page2Div" ).load( "page2.html", function(){
                  $( "#page3Div" ).load( "page3.html", function(){
                          $( "#page4Div" ).load( "page4.html", function(){
                                    alert($("#validationPages").find("input[type=text]").length);
                                    $("#validationPages").find("input[type=text]").validate();
                         });
                 });
          });
    });
</script>

Here one by one each page loaded. Once all the page get load we have pass the "validate function". In case any issue please let me know.