在ajax调用之后加载脚本的位置在哪里?

ekk*_*kis 6 javascript jquery jquery-selectors

假设您有一个简单的网页,可以动态加载如下所示的内容:

- main.html -

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
   src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.js">
</script>
<script type="text/javascript">
$(function() {
    $.ajax({
         type: 'get', cache: false, url: '/svc.html',
         success: function(h) {
             $('#main').html(h);
         }
    });
});
</script>
</head>

<body>
    <div id='main'>
    loading...
    </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

并且它加载的页面在单独的文件中使用了一点Javascript:

- svc.html -

<script type="text/javascript"
   src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.js">
</script>
<script type="text/javascript" src="/plugin.js" css="/plugin.css"></script>
<div id='inner'>
dynamically loaded content
</div>
Run Code Online (Sandbox Code Playgroud)

注意css脚本标记上的属性 - 它表示属于脚本的样式表以及脚本将为我们加载的样式表.这是脚本:

- plugin.js -

var css = $('<link />', {
    rel: "stylesheet", type: "text/css", href: $('script:last').attr('css')
});
$('head').append(css);
Run Code Online (Sandbox Code Playgroud)

最后,样式表只是为inner加载的div着色,作为证明它一切正常的证据:

- plugin.css -

#inner
{
    border: solid 1px blue;
}
Run Code Online (Sandbox Code Playgroud)

现在,您将注意到样式表被加载的方式:我们查看$('script')并选择最后一个,然后我们获取css属性并将link项目附加到文档的头部.

我可以访问/svc.html并运行javascript,加载我的样式表,一切都很酷 - 但是,如果我访问/main.html,javascript运行但无法找到plugin.js数组中的加载$('script')(因此无法加载样式表).请注意,插件脚本确实运行,它只是看不到自己.

这是一个错误吗?jQuery AJAX方法的局限性?不应该$('script')反映所有已加载的脚本?

*编辑*

在多次哭泣和咬牙切齿之后,我决定选择Kevin B的解决方案,但是,我无法让它工作,主要是因为plugin.js代码在scriptNode插入时运行,但在插件代码中,节点没有但是已插入,因此$('script')阵列中没有 - 所以我仍然是SOL.我已将所有代码放在此处进行审核:

http://www.arix.com/tmp/loadWithJs/

Poi*_*nty 5

将HTML添加到DOM的jQuery代码总是删除<script>标记.它运行它们然后扔掉它们.

该行为的一个例外是当你使用"$ .load()"和hack时,你可以加载一个页面的片段:

$.load("http://something.com/whatever #stuff_I_want", function() { ... });
Run Code Online (Sandbox Code Playgroud)

在这种情况下,脚本将被剥离,不会被评估/运行.

  • 这是一件很难的事情.我认为这可能要求退一步,并试图提出另一种策略. (2认同)