Jquery差异B / w Jquery绑定事件[重复]答案

【问题标题】：Jquery Difference B/w Jquery bind events [duplicate]Jquery差异B / w Jquery绑定事件[重复]
【发布时间】：2013-12-21 18:55:33
【问题描述】：

以下陈述之间有什么区别。在某种情况下，我应该选择哪一个。

$(document).on("click","#btn",callback);

$("#btn").on("click",callback);

【问题讨论】：

第一行是一个事件委托的例子。 It's in the docs。当代码运行时#btn 可能还不存在时，您会这样做。
这是事件委托与直接绑定，这个 SO 答案非常好stackoverflow.com/questions/8110934/… 你可以搜索“jQuery 事件委托与直接”并获得很多有用的结果......一个主要区别是通过委托，您可以考虑新的、动态创建的元素
搜索文档first - 特别是因为方法名称是known。

标签： javascript jquery

【解决方案1】：

看看event delegation jQuery documentation

基本上

$(document).on("click","#btn",callback);

将单击绑定到文档 DOM 而不是直接绑定到元素，这在您将 DOM 元素附加到窗口时很有用，在这种情况下 #btn 选择器将不存在。

【讨论】：

【解决方案2】：

基本上是直接

$(document).on("click","#btn",callback);

您正在将事件分配给document，这些事件会影响匹配的后代 (#btn)，这些后代在该行代码运行时可能存在也可能不存在。

$("#btn").on("click",callback);

使用委托，您将影响在该行代码运行时确实存在的所有匹配元素，并且不会影响以后创建的匹配元素。

http://api.jquery.com/on/

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

【讨论】：

【解决方案3】：

直接

$("#btn").on("click",callback);

DOM 中存在id 的元素被点击调用callback。如果是 DOM 处理程序中的存在将被附加。

将事件监听器直接绑定到元素

委托

阅读Event Delegation。

使用.on()

$(document).on("click","#btn",callback);

当使用id btn 添加文档中的元素时，单击该元素时运行 callback函数。

将事件监听器绑定到文档对象

语法

$( elements ).on( events, selector, data, handler );

【讨论】：