jQuery$.on()作用域的效率

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类的。

我认为最好将语气单独保留，因为有时语气是身体的直接子代，因此你需要以整个身体为目标来包括语气。此外，模态可能不会经常使用，所以我认为为一个可能不会每次都出现的模态附加一些东西是浪费。