4

以下两种情况给了我相同的行为。但是技术上的区别是什么？（我将下面的代码放在正文中脚本标签的最后一部分。）

$(document).ready(function() {
  $('.collapse').collapse({toggle: false});

  $(document).on('click', '#expandAllLessons', function() {
    $('div.accordion-body').collapse('show');
  });

  $(document).on('click', '#collapseAllLessons', function() {
    $('div.accordion-body.collapse').collapse('hide');
  });
});

或者

$(document).ready(function() {
  $('.collapse').collapse({toggle: false});
});

$(document).on('click', '#expandAllLessons', function() {
  $('div.accordion-body').collapse('show');
});
$(document).on('click', '#collapseAllLessons', function() {
  $('div.accordion-body.collapse').collapse('hide');
});

谢谢。

4

3 回答 3

4

或多或少，它在做同样的事情。

使用.on()with 子选择器，您可以使用事件委托将任何未来事件绑定到与该选择器匹配的任何元素。document是 DOM 树的顶端（在脚本执行时可用），因此您的事件委托有效。

.ready()等待 DOM 组装完毕，因此您可以更可靠地使用 , 等方法直接绑定.click()事件.hover()。

因此，您的第一个示例只是等待 DOM 组装，然后委托事件。第二个示例只是在脚本执行后立即委派事件。

来自 jQuery 关于 .on() 的文档：

直接和委托事件

大多数浏览器事件冒泡或传播，从文档中最深、最里面的元素（事件目标）一直到正文和文档元素。在 Internet Explorer 8 及更低版本中，一些事件（例如更改和提交）本身不会冒泡，但 jQuery 将这些事件修补为冒泡并创建一致的跨浏览器行为。

如果选择器被省略或为空，则事件处理程序被称为直接或直接绑定。每次在选定元素上发生事件时都会调用处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的冒泡。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最内到最外的元素），并为沿该路径匹配选择器的任何元素运行处理程序。

于 2013-04-16T04:41:11.657 回答
0

先看评论。jQuery 1.7 之后on也可以委托事件：

“.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。从 jQuery 1.7 开始，.on() 方法提供附加事件处理程序所需的所有功能。帮助从旧的 jQuery 事件转换方法，请参见 .bind()、.delegate() 和 .live()。”

所以在 jQuery 1.7 之前，这是正确的答案：

首先更好，因为当 HTML 文档完全加载到 DOM 时会触发文档就绪事件。然后你确定你有所有的元素，你可以将事件绑定到它们。

但是如果你在将'#expandAllLessons'元素加载到 DOM 之前绑定事件，那么它将根本不起作用，因为 jQuery 选择器将找不到任何元素，并且不会在任何地方绑定此事件。

在 1.7 之后，两者的工作方式几乎相同。几乎，因为在第一种情况下，当您在文档准备好之前触发事件时，它不会被执行。在第二个示例中，它将被执行，因为它是在加载脚本时附加的。

于 2013-04-16T04:25:33.087 回答
0

每当你做一个函数，不管它是否 $(document).ready(function(){}); 或其他东西，该函数内的所有内容只能读取其级别或更高级别的内容（除非您使用返回函数）。

最上面的一段意味着你的所有代码在加载之前不会被执行，但这也意味着它是嵌套代码。嵌套代码意味着某些变量和函数将无法从外部读取。例子：

function bob(){
  function sandy(){
    function joe(){
      alert("I can access anything written by sandy, bob or ray!");

    }
  }
}

function ray(){
   alert("I can't see anything from anybody but bob!");
}
于 2013-04-16T04:37:28.543 回答