1

サイトのどこにでも配置できるクラス化されたボタンがあり、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または単にこのクラスを探している 2 つのスコープを持つだけです:

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

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

または、モーダル初期化子内にイベント ハンドラを直接追加する新しいリスナを追加することは理にかなってい$('.pay-button')ますか?

4

1 に答える 1