Question

我使用3个html，1个带标题，1个带页脚，另一个带有所有内容。我正在使用以下代码加载页眉和页脚

jQuery(document).ready(function ($) {
    $('#header-load').load('/app/templates/header.html', function () {
        console.log('header loaded')
    });
    $('#footer-load').load('/app/templates/footer.html', function () {
        console.log('footer loaded')
    });
    $('.dropdown').on('show.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
    });

    $('.dropdown').on('hide.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
    });

})

在基础html中，这是以下

<!DOCTYPE html>
<html class="no-focus" lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" id="css-main" href="/public/css/app.css">
    <!-- END Stylesheets -->
</head>
<body>
    <!-- Page Container -->
    <div id="page-container" class="">
        <!-- Header -->
        <div id="header-load"></div>
        <!-- END Header -->

        <!-- Main Container -->
        <main id="main-container">


        </main>
        <!-- END Main Container -->

        <!-- Footer -->
        <div id="footer-load"></div>
        <!-- END Footer -->
    </div>
    <!-- END Page Container -->

    <!-- JS-->
    <script src="/public/library/jquery/dist/jquery.min.js"></script>
    <script src="/public/library/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/public/js/app.js"></script>
</body>

</html>

我在app.js中有一个函数加载到header.html中，但它不起作用..

加载页眉和页脚，但另一个功能不

Answer 1

.load像ajax一样工作异步，你必须等待请求完成然后找到元素并定义事件。

jQuery(document).ready(function ($) {
$('#header-load').load('/app/templates/header.html', function () {
    console.log('header loaded')
    $('#footer-load').load('/app/templates/footer.html', function () {
        console.log('footer loaded')
        $('.dropdown').on('show.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
        });

        $('.dropdown').on('hide.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
        });
    });
})
});

加载脚本javascript

1 个答案: