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.我已将所有代码放在此处进行审核:
将HTML添加到DOM的jQuery代码总是删除<script>标记.它运行它们然后扔掉它们.
该行为的一个例外是当你使用"$ .load()"和hack时,你可以加载一个页面的片段:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
Run Code Online (Sandbox Code Playgroud)
在这种情况下,脚本将被剥离,不会被评估/运行.
| 归档时间: |
|
| 查看次数: |
2663 次 |
| 最近记录: |