这个jquery语法有什么区别？

Question

$(document).on('click', '#mySelector', function() {

});

VS

$('#mySelector').on('click', function() {

});

第一个似乎在我动态添加#mySelector时起作用，而第二个语法在我动态添加时通常会给我带来麻烦。有什么区别？

Answer 1

不同之处在于事件委派 - 在第一个示例中，您要向document对象添加事件，并将其委托给#mySelector的所有实例，在第二个示例中，您要添加事件所有#mySelector个对象。

为什么你会先使用秒/我会如何注意到差异？

如果在加载页面之后将#mySelector添加到DOM ，则第一个版本有效。例如，也许您有一个按钮，在单击时，会添加一些HTML标记（例如表单），其中包含#mySelector。在第一个示例中，由于您的事件已绑定到document，因此#mySelector的任何后续添加都将识别此回调函数。第二个函数不能这样做，因为它只评估DOM就绪的#mySelector，所以在DOM ready事件初始化之后添加的任何实例都不能注册该回调函数。

Answer 2

区别在于选择器

$（document）选择当前文档，它是一个全局变量，无需做任何事情即可设置。所以

$(document).on('click', '#mySelector', function() {
//means :triggers from now on any click on the document where '#mySelector' was hit by click
});

如果您稍后添加'#mySelector'但使用

$('#mySelector').on('click', function() {
//means :triggers from now on any click on the '#mySelector' but cant find it! -> so nothing gets triggered after this is executed, because it is executed only one time! 
});

Answer 3

第一个：

 $(document).on('click', '#mySelector', function() {

每次单击文档时都会触发

，然后仅在#mySelector上发生单击时才在#mySelector元素上运行该函数。

第二个：

$('#mySelector').on('click', function() {

只有直接单击#mySelector对象时才会触发

。

对于这个例子，在使用id的地方，除了一个非常有用的东西之外没有太大区别。如果您使用第一种语法，则可以删除#mySelector对象并将其恢复，或者稍后将其附加，它将立即开始工作。

使用第二种语法，当您删除#mySelector对象时，您也将删除该事件，这意味着在重新连接#mySelector对象时必须重新创建它。

这在使用类时更有用：

$(document).on('click', '.clickme', function() {

这将自动使文档内部具有“clickme”类的每个对象响应该事件。可以添加更多“clickme”对象，它们可以正常运行而无需每次都设置事件。