Почему не работает $(document).on("ready" ...?
Ready отрабатывает в тот момент, когда загружен DOM. Если хотите, чтобы событие отрабатывало, когда загрузится страница полностью, используйте $(window).load(function() {});
1. Alert блокирует главный поток и до его завершения ничего не может происходить.
2. Страница (DOM) уже загружена но поскольку алерт происходит атомарно (и как уже выше сказано блокирует  главный поток исполнения) браузер "не уверен" в том что все снаружные скрипты / стили загружены так как $(document).ready не гарантирует "полной" загрузки страницы, там могут присутствовать асинхронные задачи.
P.S это ответ на ваш вопрос (Почему не работает) а не решение как исправить.
Для решения можете посмотреть куски кодов от других пользователей.