jQuery.on('click', 'element', function) 简化不起作用答案

【问题标题】：jQuery.on('click', 'element', function) simplifying doesn't workjQuery.on('click', 'element', function) 简化不起作用
【发布时间】：2014-07-06 01:35:34
【问题描述】：

我正在尝试使我的 jQuery 代码更简单 - .on('click', function)，我通常用 .click(function) 和类似的东西替换。但是，我的代码如下所示：

jQuery(document).on('click', '#lightbox', function() {
    //do something
});

而且我不太了解结构。我试过在 jQuery.com 等上阅读它，但它的解释很复杂。我的问题是，为什么那条线看起来不像这样..：

jQuery('#lightbox').on('click', function() {
    //do something
});

...以便我可以将其简化为这个？：

jQuery('#lightbox').click(function() {
    //do something
});

当我尝试这样做时，它不会起作用。为什么要点击选择器document而不是实际元素（'#lightbox'），然后在后面的另一个参数中引用它？

谁能给我解释一下？只是一个简单的问题 - 我不是 jQuery 方面的专家（你现在可能已经理解了），这也不是一个大错误，只是让我有点烦恼，我不能拥有相同的 click到处都是代码（因为简化的代码在其他地方也适用）。

（如果需要我可以上传整个代码并制作一个 Fiddle，它只有 70 行，所以应该很容易）

【问题讨论】：

尝试将点击放在 $(document).ready(function(){});
jQuery('#lightbox').click不是简化jQuery(document).on('click', '#lightbox',的方式，它们完全不同，第一个是static绑定，第二个是动态绑定，即绑定时，#lightbox应该存在，这样第一种方式绑定成功，但不需要存在使用第二种方式绑定的时间，之后如果添加到DOM，就会成功绑定到事件处理器。第二种方式也称为事件委托。
我怀疑您是否动态创建了#lightbox，这就是为什么在尝试通过jQuery('#lightbox').click 简化代码之后，它不起作用。 jQuery 主页中的文档也很清楚地说明了使用 .on() 的两种不同方式。
“我不能在所有地方都有相同的点击代码，这让我有点烦恼” - 由于同样的原因，你不能在任何地方都有相同的点击代码不能用 $.guessWhatIMean() 函数替换这些行。当您将不同的参数传递给函数时，它的行为会有所不同。 .on() 接受几种不同类型的参数，并且每个参数的行为都不同，所以显然你不能用更通用的 .click() 替换所有 .on('click'...) 的情况。
@nnnnnn 哈哈，我知道我不能用$.guessWhatIMean() 代替它，不幸的是，我必须说。但是，作为一个不如您高级的用户，我认为点击这样简单的事情不应该那么复杂 - 所以，在我看来，这两个代码都应该可以正常工作，无论是否动态创建。

标签： jquery onclicklistener jquery-events simplify

【解决方案1】：

你会想用这个：

jQuery(document).on('click', '#lightbox', function() {
    //do something
});

仅当在设置事件侦听器后加载 #lightbox 元素时（例如：如果您在加载页面后使用 AJAX 创建 #lightbox 元素）。

如果#lightbox 从一开始就存在于您的页面上，请使用：

jQuery("#lightbox").click(function() {
    //do something
});

正如 charlietfl 所说：请注意，click() 只是 on('click') 的简写

【讨论】：

另请注意，click() 只是 on('click') 的简写，因为这就是所讨论的内容
哦，这就是重点？好的，那我把它添加到答案中，谢谢
我只是把它扔进去，以防有任何混淆。两者都会起作用是我的观点，因为click() 实际上最终会在内部通过on()
感谢所有关于此的 cmets - 确实该元素是在此代码上方的某些行动态创建的，显然，我不知道该元素必须从以前存在才能使用后者，谢谢大家启发我。

【解决方案2】：

正如@Oliboy50 所指出的，您需要.on 的委托版本才能为DOM 中尚不存在的对象动态添加处理程序。有关这种情况的示例，请查看my fiddle。

$(document).on(event, selector, func) 发生的情况是，未由引发它们的元素处理的事件（如#ligthbox 元素上的click 事件）冒泡到主document 节点。（实际上，它们无论如何都会冒泡，感谢@nnnnnn 的提醒）。此时，jQuery 会检查事件源是否与调用.on 的选择器匹配，如果匹配，则调用func 并传入一个事件对象。

欲了解更多信息，请阅读the docs。