Event handler for jQuery works great but shouldn't because it's not in ready() function

I've made a mistake and placed the event handler for all links with class cancelAction outside of the function that's executed as the document loads, like so:

$(document).ready(function () { ... });

$(".cancelAction").on("click", function () { ... });

To my surprise, it works still! I'm pretty sure it's not supposed to. Am I wrong?

I've triple-checked that commenting out the handler voids the functionality. I can't understand for my life how the browser knows that this specific handler is to be regarded, if it doesn't get attached to any scope (since it's not being executed within ready(...) function.

Well if you have this code after document elements loaded then it should world as the code executes after dom elements are loaded. like:

....
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(".cancelAction").on("click", function () { ... });
</script>

This code would work as all elements are loaded when the code executes.