如果我将"on"与jQuery一起使用，我是否需要在准备好的文档中包含此功能？

Question

>我有以下内容：

$("#menu, #home").on('click', 'a', function() {
    //  javascript code
 });

但它还没有准备好在文档中？即使 #menu 或 #home 还不是DOM的一部分，它仍然可以正常工作吗？

Answer 1

是的，只要您使用 jQuery 1.7+，这将起作用（如果您要调整选择器），而无需等待 DOM 准备就绪，因为这种形式的事件绑定是在以前的 jQuery 版本中使用 live 或delegate实现的：

有关live，请参阅文档

从jQuery 1.7开始，.live（）方法已被弃用。使用 .on（） 附加事件处理程序。使用旧版本的 jQuery 的用户应优先使用 .delegate（） 而不是 .live（）。

$(document).on('click', '#menu a, #home a', function() {
  //  javascript code
});

Answer 2

不，

它不起作用（见这里：http://jsfiddle.net/BkxqY/）。附加处理程序需要存在的元素。但是，您始终可以委托给 DOM 中更高级别的元素，该元素在执行脚本时确实存在。F.ex，这行不通：

<script>
    $('#menu').on('click', function(e) {
      console.log(e);
    });
</script>
<a id="menu" href="#">click</a>​

但这将：

<div id="menu">
    <script>
    $('#menu').on('click', 'a', function(e) {
      console.log(e);
    });
    </script>
    <a href="#">click</a>
</div>​​​​​​​​​​​​​​

无论何时附加处理程序，您都可以始终委托给document，因为document应该始终可用，例如：

<script>
$(document).on('click', '#menu a', function(e) {
  console.log(e);
});
</script>
<div id="menu">
    <a href="#">click</a>
</div>​​​​​​​​​​​​​​

Answer 3

与其他答案相反，除非所选元素已经存在于 dom 中，否则它将无法工作。如果它们还没有任何锚元素并且这些元素是在点击事件之前添加的，它将起作用

您可以轻松尝试一下。在 chrome 中打开开发控制台并键入

$(".hopscoth").on("click","div",function(){alert("I've been clicked");});
$("body").prepend("<div class='hopscoth'><div> text </div></div>");

，然后单击页面顶部新插入的text

然后再次执行第一行并再次单击"text"。警报第二次触发，但不触发第一次

换句话说，第一个选择器必须存在。在您的情况下，这是#menu，并且必须存在#home元素。在触发事件之前，辅助选择器不必匹配任何内容。因此，您可以在使用 .on 附加事件处理程序之后添加锚元素

Answer 4

不，不需要。如果您希望在页面加载结束时执行脚本，则需要它。

您可以在此处看到此函数的示例，该函数未在$(document).ready(function()上执行。

在您的脚本中，有#menu, #home.如果您希望脚本像您想要的那样执行，则需要存在具有这些 ID 的元素。

Answer 5

如果代码放在元素#menu和#home之后，则可以工作，但在没有就绪事件块之前就不能工作

带有 2 个单击处理程序的 DEmo，一个在元素放置在 DOM 中之前，一个在元素之后http://jsfiddle.net/hhkKE/