How do I tie several methods to a single event?

Question

I have a start button (listed as css element start_button) that when click will fire several events such as, increments a score by one point, decrements a timer by one second,calls a picture and changes a couple CSS elements.

I have functions that are called on by a .on event listener that will fire (or so I hope)when called on by the a function called start. I have yet to figure how to tie the even into the function. Thank you for your contribution.

function start () $('#start_button').on('click', function(){ incrementor();//calls on the stand alone function $('#start_button').on('click', function(){ addMole(); $('#start_button').on('click', function(){ timer(); $('#start_button').on('click', function(){ incrementor(); alert (xPosistion()); alert (yPosistion()); }); }); }); });

Thank you

Answer 1

Nest all of these into the first on hook.

jQuery('#start_button').on('click', function() {
    functionNameOne();
    functionNameTwo();
    functionNameThree();
    //etc...
});

Answer 2

The jQuery API deos not support registering multiple handlers for a single event in a single call.

You can do something like this to make it look prettier:

function foo(event) {...};
function bar(event) {...};

obj.on('click', foo);
obj.on('click', bar);