Question

我有一些链接的html文档。其中之一，有一个$(window).load(function())

功能正常工作，因为当我用（F5）刷新页面时它会执行。但是，当我通过另一个HTML页面的链接访问该文档时，该功能不会被激活，我需要手动刷新它。

除了css之外，我什么都没有。我在索引页面上加载了jquery / boostrat和插件。

这是地图：

index
--products
----problem page

在问题页面上，onload不会触发。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css" /> 
        <script>
            function leslider(valor) {
                //var i = 0;
                //for (i = 0; i < 2; i++) { 
                //      window.location.reload();
                //      }
                var elementos_lbclassic118 = document.getElementsByClassName("lbclassic118");
                var elementos_lbclassic1990 = document.getElementsByClassName("lbclassic1990");
                var total_elementos = elementos_lbclassic118.length + elementos_lbclassic1990.length;
                var i;
                for (i = 1; i < total_elementos + 1; i++) {
                    document.getElementById("age" + i).style.display = "none";
                }
                document.getElementById("age" + valor).style.display = "block";
            }
        </script>
        <title>andrei</title>
    </head>
    <body>
        <div id="placeholder1"></div>
        <div id="placeholder2"></div>   
        <footer style="background-color: black; color: white; padding: 2em; margin-top: 1em;"><div id="slider"><input id="slide" type="range" min="1" max="90" step="1" value="0" onchange="leslider(this.value)" /></div></footer>       <script>
            $(window).load(function () {
                $.getJSON('http://xxxxxxxx/xxxxxxx.json', function (data) {
                    var output = "<div class='outer'>";
                    for (var i in data.lbclassic118) {
                        output += "<div style='display:none;' class='lbclassic118'id=" + "age" + data.lbclassic118[i].ageinweeks + ">" + '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks)' + data.lbclassic118[i].ageinweeks + '</strong></center></th></tr><tr><td rowspan="3" class="primera">Body Weight (g)</td><td class="segunda">average</td><td class="tercera" align="right"><strong>' + data.lbclassic118[i].average + '</strong></td></tr><tr><td class="segunda">range min</td><td class="tercera" align="right"><strong>' + data.lbclassic118[i].rangemin + '</strong></td></tr><tr><td class="segunda">range mmax</td><td class="tercera" align="right"><strong>' + data.lbclassic118[i].rangemmax + '</strong></td></tr><tr><td rowspan="3" class="primera">feed consumption</td><td class="segunda">kj bird day</td><td align="right" class="tercera"><strong>' + data.lbclassic118[i].kjbirdday + '</strong></td></tr><tr><td class="segunda">g bird day</td><td align="right" class="tecera"><strong>' + data.lbclassic118[i].gbirdday + '</strong></td></tr><tr><td class="segunda">cumulative</td><td align="right" class="tercera"><strong>' + data.lbclassic118[i].cumulative + '</strong></td></tr></table>' + "</div>";
                    }
                    output += "</div>";
                    document.getElementById("placeholder1").innerHTML = output;
                });
            });
            $(window).load(function () {
                $.getJSON('http://xxxxx/xxxxxx.json', function (data) {
                    var output = "<div class='outer'>";
                    for (var i in data.lbclassic1990) {
                        output += "<div style='display:none;' class='lbclassic1990'id=" + "age" + data.lbclassic1990[i].ageinweeks + ">" + '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks) ' + data.lbclassic1990[i].ageinweeks + '</strong></center></th></tr><tr><td>Egg No. per H.H.</td><td>cumul.</td><td><strong>' + data.lbclassic1990[i].cumul + '</strong></td></tr><tr><td rowspan="2">Rate of Lay %</td><td>per H.H.</td><td><strong>' + data.lbclassic1990[i].perhh + '</strong></td></tr><tr><td>per H.D.</td><td><strong>' + data.lbclassic1990[i].perhd + '</strong></td></tr><tr><td rowspan="2"> Egg Weight (g)</td><td>egg weight in week</td><td><strong>' + data.lbclassic1990[i].eggweightinweek + '</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>' + data.lbclassic1990[i].eggmasscumul + '</strong></td></tr><tr><td rowspan="2">Egg Mass -- g/H.D. -- kg/H.H.</td><td>egg mass in week</td><td><strong>' + data.lbclassic1990[i].eggmassinweek + '</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>' + data.lbclassic1990[i].eggmasscumul2 + '</strong></td></tr></table>' + "</div>";
                    }
                    output += "</div>";
                    document.getElementById("placeholder2").innerHTML = output;
                });
            });
        </script>
    </body>
</html>

Answer 1

您可以尝试将JavaScript更新为以下内容：

<script>
    $(function () {
        $.getJSON('http://xxxxxxxx/xxxxxxx.json', function (data) {
            var output = "<div class='outer'>";
            for (var i in data.lbclassic118) {
                output += "<div style='display:none;' class='lbclassic118'id=" + "age" + data.lbclassic118[i].ageinweeks + ">" + '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks)' + data.lbclassic118[i].ageinweeks + '</strong></center></th></tr><tr><td rowspan="3" class="primera">Body Weight (g)</td><td class="segunda">average</td><td class="tercera" align="right"><strong>' + data.lbclassic118[i].average + '</strong></td></tr><tr><td class="segunda">range min</td><td class="tercera" align="right"><strong>' + data.lbclassic118[i].rangemin + '</strong></td></tr><tr><td class="segunda">range mmax</td><td class="tercera" align="right"><strong>' + data.lbclassic118[i].rangemmax + '</strong></td></tr><tr><td rowspan="3" class="primera">feed consumption</td><td class="segunda">kj bird day</td><td align="right" class="tercera"><strong>' + data.lbclassic118[i].kjbirdday + '</strong></td></tr><tr><td class="segunda">g bird day</td><td align="right" class="tecera"><strong>' + data.lbclassic118[i].gbirdday + '</strong></td></tr><tr><td class="segunda">cumulative</td><td align="right" class="tercera"><strong>' + data.lbclassic118[i].cumulative + '</strong></td></tr></table>' + "</div>";
            }
            output += "</div>";
            document.getElementById("placeholder1").innerHTML = output;
        });
        $.getJSON('http://xxxxx/xxxxxx.json', function (data) {
            var output = "<div class='outer'>";
            for (var i in data.lbclassic1990) {
                output += "<div style='display:none;' class='lbclassic1990'id=" + "age" + data.lbclassic1990[i].ageinweeks + ">" + '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks) ' + data.lbclassic1990[i].ageinweeks + '</strong></center></th></tr><tr><td>Egg No. per H.H.</td><td>cumul.</td><td><strong>' + data.lbclassic1990[i].cumul + '</strong></td></tr><tr><td rowspan="2">Rate of Lay %</td><td>per H.H.</td><td><strong>' + data.lbclassic1990[i].perhh + '</strong></td></tr><tr><td>per H.D.</td><td><strong>' + data.lbclassic1990[i].perhd + '</strong></td></tr><tr><td rowspan="2"> Egg Weight (g)</td><td>egg weight in week</td><td><strong>' + data.lbclassic1990[i].eggweightinweek + '</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>' + data.lbclassic1990[i].eggmasscumul + '</strong></td></tr><tr><td rowspan="2">Egg Mass -- g/H.D. -- kg/H.H.</td><td>egg mass in week</td><td><strong>' + data.lbclassic1990[i].eggmassinweek + '</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>' + data.lbclassic1990[i].eggmasscumul2 + '</strong></td></tr></table>' + "</div>";
            }
            output += "</div>";
            document.getElementById("placeholder2").innerHTML = output;
        });
    });
</script>

Answer 2

那是因为窗口不会更新。如果单击链接，则只会替换/加载文档。

请尝试 $(document).ready(function() { ...

而不是 $(window).load(function () { ...

JQ加载窗口功能不起作用

2 个答案: