using script tags to drive data as events into the dom

using script tags to drive data as events into the dom

I was trying to use a script tag at the bottom of the body to retrieve the data from the server for the page.  I wanted to drive that data into the page using an event.  So that there is decoupling between the javascript that is using the data, and the script tag at the bottom that is producing the data.

The script tag at the bottom looks something like:
    <script type="text/javascript" src="../../api/summary/level"></script>
</body>
</html>

The contents of the script looks like:
$(this).trigger("level", {"INFO":11,"DEBUG":32});

This looks much like jsonp except rather then binding to a function and I am binding to an event.  I wanted to keep the padding to a minimum.  However this does not work, I have tried to implement the handler a number of ways and it never gets called.  Here are some examples of the ways I tried:
$(document).ready(function() {
    $(document).on("level", function(event, data) {
        ...
    });
});

I decided that the script tag at the end is run before the document is ever ready.  Thus this handler would not get called.  So I moved it outside the document ready tag.
$(document).on("level", function(event, data) {
    ...
});
This still not get the event from the data script tag.  I thought maybe document wasn't ready.  So I switched to live:
$(document).live("level", function(event, data) {
    ...
});
This still did not work, maybe because the document is not ready and live only applies till after the document is ready?


How do I bind to a custom event that is being generated as the page loads?