是load(); jQuery中弃用了吗?

问题描述 投票:0回答:1

我有一些几年前可以正常工作的代码,但是根本无法正常工作。我希望有人可以解释我的错误。我关注了Stackoverflow中的其他几个线程,并在jQuery网站上看到了几页建议不推荐使用load()函数,但我也看到了相反的断言。

[我试图在三个div中的每一个中设置一个页面,每次有人单击菜单按钮时,每个div都会加载一个新页面。

这里是代码。

rdc


<html>

<head>


    <title>Page Title Here</title>
    <link rel="stylesheet" media="all" href="css/style.css" style type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display+SC' rel='stylesheet' type='text/css'>

    <script src="js/jquery-3.4.0.js"></script>

<script>

$(document).ready(function() {  
    $(".titlepage").click(function(){
        $("#poem").load("books/TitlePage.html", function(){
        $("#comments").load("comments/commtp.html", function(){
        $("#notes").load("notes/notesOvrView.html");
            });
        });
    });

    $(".prelim").click(function(){
        $("#poem").load("books/prelim.html", function(){
            $("#comments").load("comments/commPrelim.html", function(){
            $("#notes").load("notes/notesPrelim.html");
                });
            });
    });

    $(".book1").click(function(){
        $("#poem").load("books/book1.html", function(){
            $("#comments").load("comments/comm1.html", function(){
            $("#notes").load("notes/notes1.html");
                });
            });
    });

    $(".book2").click(function(){
        $("#poem").load("books/book2.html", function(){
            $("#comments").load("comments/comm2.html", function(){
            $("#notes").load("notes/notes2.html");
                });
            });
    });

    $(".book3").click(function(){
        $("#poem").load("books/book3.html", function(){
            $("#comments").load("comments/comm3.html", function(){
            $("#notes").load("notes/notes3.html");
                });
            });
    });

    $(".book4").click(function(){
        $("#poem").load("books/book4.html", function(){
            $("#comments").load("comments/comm4.html", function(){
            $("#notes").load("notes/notes4.html");
                });
            });
    });

    $(".book5").click(function(){
        $("#poem").load("books/book5.html", function(){
            $("#comments").load("comments/comm5.html", function(){
            $("#notes").load("notes/notes5.html");
                });
            });
    });


    $(".book6").click(function(){
        $("#poem").load("books/book6.html", function(){
            $("#comments").load("comments/comm6.html", function(){
            $("#notes").load("notes/notes6.html");
                });
            });
    });

    $(".book7").click(function(){
        $("#poem").load("books/book7.html", function(){
            $("#comments").load("comments/comm7.html", function(){
            $("#notes").load("notes/notes7.html");
                });
            });
    });

    $(".book8").click(function(){
        $("#poem").load("books/book8.html", function(){
            $("#comments").load("comments/comm8.html", function(){
            $("#notes").load("notes/notes8.html");
                });
            });
    });

    $(".book9").click(function(){
        $("#poem").load("books/book9.html", function(){
            $("#comments").load("comments/comm9.html", function(){
            $("#notes").load("notes/notes9.html");
                });
            });
    });

    $(".book10").click(function(){
        $("#poem").load("books/book10.html", function(){
            $("#comments").load("comments/comm10.html", function(){
            $("#notes").load("notes/notes10.html");
                });
            });
    });

    $(".book11").click(function(){
        $("#poem").load("books/book11.html", function(){
            $("#comments").load("comments/comm11.html", function(){
            $("#notes").load("notes/notes11.html");
                });
            });
    });

    $(".book12").click(function(){
        $("#poem").load("books/book12.html", function(){
            $("#comments").load("comments/comm12.html", function(){
            $("#notes").load("notes/notes12.html");
                });
            });
    });
});//end document ready

</script>


</head>
<body>


<div id="notes">
        <div class="inner">
            <h3>Content on Opening here</h3>

            <p>&nbsp;</p>

            <h3>More Content</h3>
            <p>&nbsp;</p>
            <p></p>
            <p></p>

            <p></p>


    <p></p>

    <p class="hi">Still more content for opening.</p>

        </div> <!--End of div "inner" -->

</div> <!-- END div id "notes" -->


    <div id="poem">
        <div class="inner">


        <h3 class="tp">A Title Here</h3>



        <p class="tp">Sub-heading</p>



        <p class="tp">Content</p>


        <p class="tp">To be seen upon arrival.</p>


        <p>&nbsp;</p>       

        <p>&nbsp;</p>




    </div> <!-- END div class inner -->
</div> <!-- END div id "poem" -->


<div id="comments">

        <div class="inner">


            <h3>Anothr div here</h3>
            <p class="small">With</p>

            <p>some content.</p>

            <p></p>


        </div> <!-- END div class "inner"-->
</div> <!-- END div id "comments"-->




    <div id="head">Title 
        <span class="font1">Sub-title</span> 
        <span class="font2">by the author</span> 
        <span class="font3">Named here</span>
    </div><!-- END div id "head" -->

    <div id="foot">
    <div class="floating-menu">

        <h3>Books:</h3>
        <input type="button" class="titlepage" value="Home" />
        <input type="button" class="prelim" value="Preliminaries" />
        <input type="button" class="book1" value="Book I" />
        <input type="button" class="book2" value="Book II" />
        <input type="button"  class="book3" value="Book III"/>
        <input type="button" class="book4" value="Book IV" />
        <input type="button" class="book5" value="Book V" />
        <input type="button"  class="book6" value="Book VI"/>
        <input type="button" class="book7" value="Book VII" />
        <input type="button" class="book8" value="Book VIII" />
        <input type="button"  class="book9" value="Book IX"/>
        <input type="button" class="book10" value="Book X" />
        <input type="button" class="book11" value="Book XI" />
        <input type="button"  class="book12" value="Book XII"/>

    </div>  
</div><!-- END div id "foot" -->

</body>
</html>`

jquery html load
1个回答
0
投票

感谢所有看过的人。一个朋友为我找到了问题。不是jQuery发生了变化,而是浏览器发生了变化。一旦我加载了此页面并将它的伴随文件加载到服务器,它就可以正常工作。

© www.soinside.com 2019 - 2024. All rights reserved.