Question

I’m developing sites using progressive enhancement implemented completely in jQuery.

For instance, I’m adding onclick event handlers dynamically to anchor tags to play linked MP3 files “inline” using SoundManager and popping up Youtube players for Youtube links, through $(document).ready(function()).

However, if the user clicks on them while the page is loading, they still get the non-enhanced version.

I’ve thought about hiding the relevant stuff (via display: none, or something like that) and showing it when loaded, or putting a modal “loading” dialog, but both sound like hacks.

Any better ideas? I feel I’m missing something completely obvious here.

Regards,

Alex

Answer 1

I haven’t tested this, but you could try live. The thinking is that you could put your click handlers outside of document.ready so they get executed right away. Since live uses event delegation to achieve it’s functionality, you don’t really need to wait for the DOM to be ready, and any clicks that are made while the page is loading should still be captured by the event handler.

If that doesn’t work, you could try putting the Javascript script tags directly underneath whatever they need to bind. It’s not pretty, but it will pretty much eliminate the problem.