jQuery event binding and handling

Question

I've seen a lot of jQuery code like this, needless to say I don't like it:

<div id="myDiv">
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
</div>

<script>
    $(document).ready(function(){
        $('clickable').click(function(){
            // Do some stuff...
        });
    });
</script>

I realize people are doing this because the above event binding and handling requires the html structure to be available on the page, but it leads to mixing the presentation, logic and configuration all over the views of the web site. Also, it makes it very hard to debug the logic with just about any debugger out there.

So, I've started coding like this, on a separate .js file (fiddle here):

// BEGIN: Event Handlers
    var onLoad = function(){
        $('.clickable').data('clicked', false);
    };
    var onMyDivClick = function(){
        var clicked = $(this).data('clicked');
        if (clicked) {
            $(this).trigger('myCustomEvent');
        } else {
            alert('you clicked me');
            $(this).data('clicked', true);
        }
    };
    var onMyCustomEvent = function(){
        $(this).css('color', 'dimGray');
        alert('please don\'t click me again');
    };
// END: Event Handlers

// BEGIN: Event Binding
    $(window).on('load', onLoad);
    $(document).on('click', '.clickable', onMyDivClick);
    $(document).on('myCustomEvent', '.clickable', onMyCustomEvent);
// END: Event Binding

Now, I don't need to care about the structure being on page. I don't need to wrap everything inside $(document).ready(function(){}); And I don't need to care if the structure is going to be loaded with ajax or not.

Question 1
Are there any downsides on the approach? So far, I haven't found any. But before refactoring bulk of the code on our sites, I would like to hear about the possible caveats.

Question 2
How could this approach be taken even further with the latest jQuery features?

Answer 1

There is one downside I know with this approach. It is written in the Event performance section in .on().

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

So after you binding all events to document, it would perform worse.

And in Additional notes, there are some thing can't work with this approach, such as load, scroll, and error.