Question

我有以下内容：

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

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

Answer 1

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

请参阅documentation for 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应始终可用，f.ex：

<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()，here上执行。

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

Answer 5

如果代码放在元素#menu和#home之后，而不是之前没有就绪事件块，则会有效吗

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

如果我在jQuery中使用“on”，我是否需要在文档中包含此函数？

5 个答案: