Question

当我点击按钮时，我进行了一个ajax调用，该调用会在id为＆＃39; main＆＃39;的div中加载不同的html代码。我没有问题显示html代码，但我无法找到一种方法来改变/添加/包含css和js代码到我当前的页面。

或者实际上，我发现了许多不同的方法，但是我做了我想做的事。

首先，我尝试将链接和脚本标记作为字符串发送到json对象（使用我的其他html代码）中，并将它们插入到我希望它们的位置。

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

当我检查元素时，它似乎正确插入它们。并查看来源＆＃39;浏览器中的标签（chrome），但他们不会执行/运行。

然后，我尝试将id属性添加到我的css和js元素，然后分别更改href和src属性（我尝试在我的ajax调用之前和之后都执行此操作，但都在click事件中）。这允许我带走属于以前插入div中的html代码的css和js，这就是我想要的。

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

当我检查元素时，它们也被包括在内。并查看来源＆＃39;浏览器中的选项卡（chrome），但显然他们不执行/运行，因为这与我在第一个示例中所做的几乎完全相同（只是现在的代码是在我的新视图中没有使用的东西被带走了。）

然后我认为找到$.getScript()方法之后我找到了js文件的解决方案，因为它执行了直接在$(document).ready(function(){....}下的脚本，但是我发现在以后的任何地方都找不到该文件我检查元素＆＃39;或者在“来源”下查看＆＃39;浏览器中的选项卡（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")
        }
    });
})

如何使用ajax更改和运行js和css（less）文件（使用jquery）

1 个答案: