Question

我有一个分类按钮，我希望能够放在我的网站上的任何地方，并让jQuery附加一个事件处理程序。由于在初始页面加载后可能会将这些按钮中的一些添加到DOM中，因此我需要将事件处理程序范围限定为父选择器，并在父范围内侦听我的分类按钮。

示例（在CoffeeScript中）：

@$body = $('body')    
@$body.on 'click', '.pay-button', @handlePayButton

handlePayButton: (e) =>
  /* Do something */

这显然不是非常有效，因为它需要听取@$body内的每一次点击，因此将它扩展到更具体的内容会更好：

@$contentPage = $('#content-page')    
@$contentPage.on 'click', '.pay-button', @handlePayButton

handlePayButton: (e) =>
  /* Do something */

但是，我希望能够在模式窗口中使用这个分类按钮，这个按钮既可以在初始加载后添加到DOM中，也可以在@$contentPage的范围之外。

将范围保持在较低的特异性（即：@$body），或仅仅有两个寻找此类的范围是否更有效：

@$contentPage = $('#content-page')
@$modal = $('#modal')
@$contentPage.on 'click', '.pay-button', @handlePayButton
@$modal.on 'click', '.pay-button', @handlePayButton

handlePayButton: (e) =>
  /* Do something */

或者，在模态初始值设定项中添加一个新的侦听器，将事件处理程序直接添加到$('.pay-button')是否有意义？

Answer 1

我会在模态初始化到模态本身后附加模态的处理程序，你可以将它附加为

$('#modal .targetClass');

对于其余的按钮，我想最高的父母会这样做。在我正在处理的当前项目中，我们有一个包含除页眉和页脚之外的所有正文内容的div。这是我用来附加可能出现在任何地方的misc类。

我认为最好让模态独立，因为有时模态是身体的直接孩子，因此你需要将整个身体作为目标来包含模态。此外，模式可能不会经常使用，因此我认为将某些东西附加到身体上以获得可能不会每次都出现的模态是浪费。

jQuery $ .on（）范围的效率

1 个答案: