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

Question

I'm currently building an app that has makes use of the .on() in jQuery .

What I've noticed is, i am making alot of use of the .on() method. so much so, that it feels like my code is starting to become very messy.

$(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

What I'm wondering is... is there a more efficient way of using the .on() method to handle a variety of different clicks on things that may be happening throughout the page?

Alot of the content is loaded via ajax , so the content will vary, but im just looking for a more elegant way of using this method so my code is much more leaner and more efficient

thanks in advance

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]);
}

If you want to handle events other than click , you could add another layer to your handler object and another layer in the for loop.