Question

我试图让我的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的专家（就像你现在可能已经理解的那样），这也不是一个重大错误，它只是让我烦恼一点，我可以＆＃ 39; t到处都有相同的click代码（因为简化的代码适用于其他地方）。

（我可以上传整个代码并在必要时制作一个小提琴，它只有70行，所以应该很容易）

Answer 1

您想要使用此功能：

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

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

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

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

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

Answer 2

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

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

有关详情，请参阅the docs。

jQuery.on（＆＃39;点击＆＃39;，＆＃39;元素＆＃39;，功能）简化不起作用

2 个答案: