Question

For example, let’s say I have

$(element).on('click', function() {/*Some Stuff*/});

defined somewhere, then later I want to add more features to that same click event. If I do

$(element).on('click', function() {/*Other Stuff*/});

will “Other Stuff” overwrite “Some Stuff”?

Answer 1

The second listener won’t override the first. jQuery event handlers are added cumulatively and execute in the order they were attached.

The thing that does effect whether one handler prevents the other running is how the function cancels the browser’s default click handler (i.e. how you stop the browser following the link’s url)

If you use traditional method:

$(element).on('click', function() {

    /* Some Stuff, do your thing */ 

    return false; 
});

The handler above will stop the event itself and propagating to other handlers.

But you can stop the event action without stopping its propagation or the handler:

$(element).on('click', function(e) {

    // prevent the default action at first, just to make it clear :)
    e.preventDefault(); 

    /* do your thing */

    return /* what you want */;
});

This will ensure that the default click action doesn’t occur but that the event continues to other hanlders. jQuery event also has some other useful event propagation methods (e.g. Event.stopPropagation()) which are worth getting to know.