调整 load() 代码

Question

我正在尝试修改 post 中的代码，解决方案是：

function animateTransition(event) {
    // load the html contained in the tag with id of #main
    $('#article-container').load('myArticle.html #main', function() {
        // load the css
        $('head').load('myCSS.css', function() {
            // load the js
            $.getScript('myScript.js', function() {
                console.log("Animating...");
                $('#content-container').addClass('animate');
                $('#article-container').addClass('animate');
            });
        });
    });
}

...想出我自己的版本：

<div id="menu_aEmpresa"
     onclick="$('#mainContent')
              .load('aEmpresa_pt.html #aEmpresa_mainContent > *', function(){
                $('head').load('css/aEmpresa.css'); // load the css
                $.getScript('js/aEmpresa.js'); // load the js
              });">
</div>

基本上，我想在加载内容的同时加载外部文件 (aEmpresa_pt.html) 中引用的 css 和 js 文件。 但是，这种语法不起作用。请帮忙？

谢谢。

佩德罗

Answer 1

这不是您应该使用 jquery 编码的方式。

您应该将您的 html 代码与您的 js/jquery 代码分开：

HTML

<div id="menu_aEmpresa"></div>

jQuery

<script>
    $(function(){
        $('#menu_aEmpresa').on('click',function(){
            $('#mainContent')
              .load('aEmpresa_pt.html #aEmpresa_mainContent > *', function(){
                $('head').load('css/aEmpresa.css'); // load the css
                $.getScript('js/aEmpresa.js'); // load the js
             });">
        });
    });
</script>