在 jquery 中使用 .on() 的更有效方式

Question

我目前正在構建一個使用jQuery中的.on()的app 。

我注意到的是，我正在大量使用.on()方法。 如此之多，以至於感覺我的代碼開始變得非常混亂。

$(document).on('click','.close-comments',function(){
shrinkComments();
});
// end function

$(document).on('click','.reload',function(){
// perform reload
});
// end function

$(document).on('click','.write-comment',function(){
});
// end function

$(document).on('click','#load-more',function(){
});
// end function

我想知道的是......是否有更有效的方法來使用.on()方法來處理整個頁面中可能發生的各種不同的點擊？

很多內容是通過ajax加載的，所以內容會有所不同，但我只是在尋找一種更優雅的方式來使用這種方法，所以我的代碼更精簡、更高效

提前致謝

Answer 1

var clickHandlers = {
  '.close-comments' : function() {
    shrinkComments();
  },
  '.reload': function() {
    // perform reload
  },
  '.write-comment': function() {
  },
  '#load-more': function() {
  }
};
for (var selector in clickHandlers) {
  $(document).on('click', selector, clickHandlers[selector]);
}

如果您想處理click以外的事件，您可以向handler對象添加另一個層，並在 for 循環中添加另一個層。