Question

我正在尝试选择页面中的所有<script type="text/html">标记。我使用<script>标记来存储HTML模板，类似于how John Resig does it。出于某种原因，以下jquery选择器似乎没有选择任何内容：

$("script[type*=html]").each(function() {
    alert("Found script "+this.id);
});

此标记位于HTML文档的BODY中：

<body>
    <script id="filter-search" type="text/html">
        <dt>Search</dt>
        <dd><input type="text"/></dd>
    </script>
</body>

我也尝试将它放入HTML文档的HEAD中，但仍未找到它。没有显示警报。

如果我改为将代码更改为：

$("script[type*=javascript]").each(function() {
    alert("Found script "+this.id);
});

然后它只找到HEAD中对外部文件有src的脚本。找不到实际页面中的脚本。例如，HEAD中有以下内容：

<head>
    <script type="text/javascript" src="jquery.js" id="jquery"></script> 
    <script type="text/javascript" src="jquery-ui.js" id="ui"></script> 
    <script type="text/javascript" id="custom">
        $(document).ready( function() {
            $("script[type*=javascript]").each(function() {
                alert("Found script "+this.id);
            });         
            $("script[type*=html]").each(function() {
                alert("Found TEMPLATE script "+this.id);
            });         
        });
    </script> 
    <script id="filter-test" type="text/html">
        <dt>Test</dt>
    </script>
</head>
<body>
    <script id="filter-search" type="text/html">
        <dt>Search</dt>
        <dd><input type="text"/></dd>
    </script>
</body>

我收到以下提醒：

找到脚本jquery
找到脚本ui

未选择HEAD中的custom和filter-test脚本，filter-search标记中的body脚本也未选中。

这是预期的行为吗？为什么这不起作用？我可以解决它，但它不起作用很烦人。

编辑：事实证明，使用上面的示例确实可以正常工作。在我的情况下，jquery代码在外部Javascript模块中，它肯定无法正常工作。当我将代码移动到页面本身的脚本标记时，它就可以工作了。我仍然没有弄清楚为什么它不能在外部文件中工作，但如果我在某个时候解决它，我会在这里报告。

Answer 1

您使用的浏览器是什么？这个脚本在我的Chrome，Firefox和IE6中运行正常，给我提醒：

找到脚本jquery
找到脚本ui
找到脚本自定义
找到TEMPLATE脚本过滤器测试
找到TEMPLATE脚本过滤器搜索

Answer 2

您使用外部脚本遇到的问题可能是由于加载顺序造成的。为了最大限度地提高响应速度，浏览器会在页面完全下载和解析之前开始加载和执行页面中遇到的脚本。因此，如果您在head元素中链接了一个脚本，它可能无法访问页面下方指定的DOM部分，就像您的自定义脚本标记一样。

两种可能的解决方案：

重新排列脚本标记，以便自定义标记位于使用它们的脚本之前。
用等待加载DOM的东西包裹你的脚本（比如jQuery $() shortcut）。

脚本标记的jquery选择器问题

2 个答案: