Making jquery .on function work with AJAX loaded content

First make sure you're hitting the target, try this and see if the alert shows :

$(function() {
    $(document).on('click', '#news', function() {
       alert('ok');
    });
});

If the alert shows when clicking the #news element, it's ok.

Now to this line:

$.get("http://<? echo ROOT; ?>includes/functions.php",

You are using the shorthand PHP opening, and that needs to be turned on, you could try

<?php echo ROOT; ?>

But what the frack is ROOT, never seen that before, and could not find anything in the PHP manual on ROOT, so I tried on my own server with the newest version of PHP, and got an error as 'ROOT' does not exist, instead it assumed it was a string and just echo'ed "ROOT", so your link would look like:

$.get("http://ROOTincludes/functions.php",

It it's a variable you have defined somewhere yourself, it should start with a dollarsign, if it's something you've defined with define(), make sure it's set up correctly and if it's using something like $_SERVER['DOCUMENT_ROOT']; that's not always something you can access in javascript as it will normally be a folder that is higher then your webroot, and can't be accessed on the clientside but only on the serverside.

Also, the way you have written it, starting with http:// it should be a domain name. Try opening view source in you browser and find your ajax function and see what ROOT actually outputs, as the final ouput will be visible in the source, and if it's set using define() in an included config file etc. you can see that it was set up correctly.

Your javascript would also have to be inside a PHP file for PHP to execute, or you would have to modify your server setup to run JS files thru PHP.

In my opinion just using a path and filename is the right way to do it, try this and pay attention to

Since you said that you have previously worked with .live() could the issue here be that you're trying to bind your click on something that you append to the document before you append it?

When you use live, it handles this sort of stuff automatically, but when you don't use live, things generally have to exist on the page before you bind any events to them. If you add something with AJAX, you can't set up click events for those things before you've loaded them in with AJAX. When you use .live() you can do this ahead of time.

I would do it like this:

$("#overlay-content").on('click','#news',function() {
        var active = 1;
        $("#loading").show();
        $("#overlay-content").fadeOut(1000, function() {
            $.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) {
                $("#loading").hide(400);
                $("#overlay-content").empty().append(data).fadeIn(1000);

                //put your delegate/call/function,etc here

            });
        });
    });