0

$()是否可以从下面的脚本中删除两个aka ready 处理程序？我想在 DOM 准备好之前加载 jquery，但仍然可以引用#certification.

    $(function(){
           $("#certification").multiselect({
               minWidth: "500",
               noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
               selectedText: function(numChecked, numTotal, checkedItems){
                   return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
               }
           });
    });

编辑：请假设#certification 出现在上述脚本之前（在<head>）。我想在整个 DOM 准备好之前从脚本中引用#certification。没有 $ ready 处理程序是否可以做到这一点？

EDIT2：请假设上面位于<head>

解决方案：根据给出的建议，我能够解决问题。$(function(){}) 就绪处理程序被删除，#certification 元素出现在 jquery 之前。#certification 元素和 jquery 都从 移到了<head>它<body>应该在的位置。现在 jquery 在 DOM 的其余部分按预期准备好之前显示。谢谢大家的回答。

4

6 回答 6

5

该#certification元素需要存在才能选择它。您应该能够将脚本放在元素定义之后并且没问题。

好的：

<script>
    $(function(){
        $('#certification').whatever();
    });
</script>
<div id="certification"></div>

不好：

<script>
    $('#certification').whatever();
</script>
<div id="certification"></div>

好的：

<div id="certification"></div>
<script>
    $('#certification').whatever();
</script>
于 2013-10-10T20:42:56.980 回答
2

你不能。在 DOM 准备好之前，元素将不可用。或将脚本移到#certification.代码中的元素之后。$(function(){});确保引用元素的脚本运行良好（因为仅在文档准备好时才执行就绪回调），无论它放在哪里。

如果您通过外部 document.ready 或在 DOM 中的元素之前引用该元素$('#certification')，它将不会选择该元素，任何选择器都是如此，除了事件委托，您将事件绑定到要委托的文档头到任何匹配的选择器（完全是一种不同的动物），因为文档头是您一直可以参考的东西。

于 2013-10-10T20:41:50.897 回答
2

这取决于您要做什么，更多的上下文会有所帮助。然而值得注意的是，如果你在 head 部分有那个 JS 片段（我假设你想根据“在 DOM 加载之前”将它放在哪里），#certification 将不存在，因为它指的是具有 ID 的 DOM 元素'认证'。

有关您正在尝试做什么的更多信息将有助于提供更好的建议。

我会推荐的是让你的块成为一个函数，并在 DOM 上调用它，如下所示：

function doMultiSelect(elem) {
  elem.multiselect({
     minWidth: "500",
     noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
     selectedText: function(numChecked, numTotal, checkedItems){
     return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
    }
 });
}

然后你可以在准备好的DOM上调用它

$(function() {
  doMultiSelect($("#certification"));
});

我刚看到你的解释。做：

<div id="certification""></div>
<script> $("#certification").multiselect.......</script>

那应该工作得很好

于 2013-10-10T20:47:48.187 回答
1

我想在 DOM 准备好之前加载 jquery，但仍然可以参考 #certification

怎么会？

它#certification是 DOM 的一部分，你想在它加载之前如何引用它？

如果你在元素减速之后运行你的脚本是有意义的。

于 2013-10-10T20:42:09.037 回答
1

一种通用的方法是轮询元素的可用性，然后推迟到那里：

(function doit(){
          var fields= $("#certification");
         if(!fields.length){return setTimeout(doit, 50);}
            fields.multiselect({
               minWidth: "500",
               noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
               selectedText: function(numChecked, numTotal, checkedItems){
                   return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
               }
           });
    }());

我更喜欢使用事件或委托观察者，但如果您无法以最佳方式订购标签，这将起作用。

于 2013-10-10T20:44:44.043 回答
1

$()“是否可以从下面的脚本中删除两个aka ready 处理程序？”

你的脚本只包含一个准备好的处理程序，但是是的，它可以被删除。

“请假设#certification出现在上述脚本之前。我想#certification在整个 DOM 准备好之前从脚本中引用。如果没有 $ ready 处理程序，是否可以这样做？”

是的。脚本元素中的代码可以引用出现在该脚本之前的元素，因为页面源中较高的元素已经被解析并添加到 DOM。因此，如果您的脚本在元素之后，那么您可以简单地执行以下操作：

       $("#certification").multiselect({
           minWidth: "500",
           noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
           selectedText: function(numChecked, numTotal, checkedItems){
               return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
           }
       });

“EDIT2：请假设上面位于<head>”

嗯？这与您之前的“请假设”声明相矛盾。脚本如何位于头部但仍位于元素之后？#certification您不应该在 head 部分中包含“常规”元素，而应仅包含 title 元素加上 base、link、meta、style 或 script 元素。如果您确实包含#certification在头中，它可能在某些浏览器中有效，但这不是一个好计划。

规则其实并不复杂。为了让任何给定的脚本引用一个元素，脚本必须在元素添加到 DOM 之后运行。所以要么：

  • 在它引用的元素之后包含脚本元素
  • 将脚本包含在 DOM 就绪（或 onload）处理程序中
  • 以上两者

请注意，您可以在页面上包含多个脚本块，因此您可以仅将$("#certification").multiselect({...})部分包含在其自己的脚本元素中，紧跟在该#certification元素之后，然后在其他地方包含其他脚本（例如，在头部的 DOM 就绪处理程序中，或在结束</body>标记之前的正文结尾）。

编辑：从您在另一个答案下发布的一些评论中，“是否$需要等待 DOM 完成加载？” 和“所以我不能避免使用$()准备好的处理程序？没有它就没有办法编写 jquery 吗？”，以及在你原来的问题中你谈到有两个“$()又名准备好的处理程序”的事实，似乎你误解了该$()功能的作用。

$()只是 的别名，并且仅在将函数作为参数传递时才jQuery()创建 DOM 就绪处理程序。当您传递一个字符串时，这与创建就绪处理程序无关。$("#certification")

于 2013-10-10T20:50:10.610 回答