Question

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

$(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');
});

感谢。

Answer 1

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

通过将.on()与子选择器一起使用，您将使用事件委派将任何将来的事件绑定到与该选择器匹配的任何元素。 document是DOM树的最顶层（并且在脚本执行时可用），因此您的事件委托可以正常工作。

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

所以你的第一个例子就是等待DOM组装，然后委托事件。第二个例子是在脚本执行时立即委派事件。

From jQuery's documentation regarding .on():

直接和委派活动

大多数浏览器事件冒泡，或者   从最深的，最内层的元素（事件目标）传播   它们一直发生在身体和身体上的文件   文件元素。在Internet Explorer 8及更低版本中，有一些事件如此   因为更改和提交本身不会冒泡，但jQuery会修补这些   泡泡并创建一致的跨浏览器行为。

如果省略selector或为null，则将事件处理程序称为   直接或直接约束。每次事件都会调用该处理程序   发生在所选元素上，无论它是直接出现在   来自后代（内部）元素的元素或气泡。

提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。 jQuery从事件目标起泡事件   到附加处理程序的元素（即最里面的）   最外面的元素）并为其中的任何元素运行处理程序   匹配选择器的路径。

Answer 2

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

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

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

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

但是如果在将'#expandAllLessons'元素加载到DOM之前绑定事件，那么它将无法工作，因为jQuery选择器将找不到任何元素，并且不会将此事件绑定到任何位置。

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

Answer 3

每当你执行一个函数时，无论它是$（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!");
}

在文档内部或外部使用jquery准备好

3 个答案: