Question

I have inherited a relatively big javascript app (~3k lines of code) and just do parttime javascript. I want to put all the jQuery event handlers into a more sane organization. I was thinking something like this:

before:

$('#click-here').click(function(){
  //a bunch of dom manipulations and with 30 of them makes the app fairly convoluted
});

after:

function result_click(){
  var global_id=$(this).data('global-id');
  alert('here are the results of clicking: ' + global_id);
}

$(document).ready(function(){
  $('#click-here').on('click',result_click);
});
</script>
<div id='click-here' data-global-id='23'>click HERE!</div>

This would be a fairly easy refactoring and would seem to structure it better. The event handling part seems to be the most out of control. Is this a reasonable way to do this? It would seem fairly easy to make this into a backbone.js app once it gets to this point.

thx

Answer 1

Yes, it’s good to pre-define functions and then pass a reference to the functions into the click event.