3

我有以下内容：

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

但是里面的文件还没准备好？即使#menu 或#home 还不是DOM 的一部分，它还能正常工作吗？

4

5 回答 5

3

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

请参阅文档live

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

$(document).on('click', '#menu a, #home a', function() {
  //  javascript code
});
于 2012-06-04T09:54:36.353 回答
3

不，它不起作用（见这里：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应该始终可用，f.ex：

<script>
$(document).on('click', '#menu a', function(e) {
  console.log(e);
});
</script>
<div id="menu">
    <a href="#">click</a>
</div>​​​​​​​​​​​​​​
于 2012-06-04T09:59:06.557 回答
1

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

你可以很容易地尝试一下。在 chrome 中打开开发控制台并输入

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

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

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

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

于 2012-06-04T09:57:14.857 回答
0

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

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

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

于 2012-06-04T09:53:51.287 回答
0

如果代码放在元素之后#menu而#home不是之前没有准备好的事件块，则将起作用

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

于 2012-06-04T11:12:28.037 回答