javascript - 如何使用 ajax(使用 jquery)更改和运行 js 和 css(较少)文件

Question

当我单击一个按钮时，我进行了一个 ajax 调用，该调用将不同的 html 代码加载到一个 ID 为“main”的 div 中。我可以毫无问题地显示 html 代码，但我找不到将 css 和 js 代码更改/添加/包含到我当前页面的方法。

或者实际上，我已经找到了很多不同的方法，但没有做我想让它做的事情。

首先，我尝试将链接和脚本标记作为字符串发送到 json 对象中(使用我的其他 html 代码)，然后将它们插入到我想要的位置。

$('#main').children().remove();
$('#main').append(data.html);
$('body').append(data.js);
$('head').append(data.css);

当我“检查元素”并查看浏览器 (chrome) 中的“源代码”选项卡时，这似乎正确地插入了它们，但它们不执行/运行。

然后，我尝试将 id 属性添加到我的 css 和 js 元素，然后分别更改 href 和 src 属性(我在 ajax 调用之前和之后都尝试过这样做，但都在 click 事件中)。这使我能够带走属于我想要的 div 中插入的先前 html 代码的 css 和 js。

$('#lessAjax').attr('href', 'location/style.less');
$('#jsAjax').attr('src','location/main.js');

当我“检查元素”并查看浏览器(chrome)中的“源”选项卡时，它们也包含在内，但显然它们也不会执行/运行，因为这很漂亮与我在第一个示例中所做的大致相同(只是现在我的新 View 中未使用的代码被删除)。

然后我认为我在找到 $.getScript() 方法后找到了 js 文件的解决方案，因为它执行了我的脚本，该脚本直接位于 $(document).ready( function(){....}，但我注意到当我“检查元素”或在浏览器(chrome)的“源”选项卡下查看时，无法在任何地方找到该文件，所以没有办法删除或调试代码。

我也试过

$('<link href="location/style.less" type="text/css" rel="stylesheet/less">')
.appendTo("head");

其中包含文件但也不执行/运行/工作。

我不想只在脚本和样式标签中包含 css 和 js 代码。 我希望能够切换 css 和 js 文件，因为我使用 Ajax (jQuery) 更改此 div 中的 html 代码。

在这 5 个小时里，我尝试了很多东西，但我现在记不住它们了。这肯定是一件很常见的事情吧？或者我真的不应该这样做有什么理由吗？

任何帮助将不胜感激。

Answer 1

jqueryMobile: How to load external Javascripts

Can I load external stylesheets on request?

不过，请考虑为此类内容使用模板引擎。有很多像 underscoreJS 甚至支持它们的框架，如 Knockout、AngularJS 和 Backbone。

$("#somebutton").click(function(){
    var path = 'path to css';
    $.ajax({
        url: path,
        type:'HEAD',
        error: function()
        {
            alert("failure")
        },
        success: function(result)
        {
            alert("success")
        }
    });
})