I have this script which loads content from another page.

$(".load").click(function () {
    $("#projects").html("");
    $("#loading").show();
    $("#projects").load("projects.html #"+$(this).data('id'), function () {
        $("#loading").hide()
    })
})

Once the content has been viewed, I'm wanting to have a link which closes the content. I've tried the following:

$(".exit").click(function () {
    $("#projects").hide();
})

Which works, but once it's clicked the content can't be viewed a second time. I tried trying to end the script with a return but can't seem to get it working.

What version of jQuery do you use?

 

I'm assuming it's because the elements don't exist in the DOM until after the AJAX call, so instead of using click(), you could try:

 

$(document).on('click', '.exit', function() {
 // do your stuff
});

Or the following (for jQuery versions 1.6 and below):

 

$('.exit').live('click', function() {
 // do your stuff
});

Reference here:

 

https://api.jquery.com/on/

https://api.jquery.com/live/

I'm using the latest version of jQuery, however getting the same result with your first suggestion.

 

If I click the exit link first it just stops the other function from working until the page is reloaded. If i click it after the content has been loaded it does hide the content, but again stops the other function from working.

Do you have a link to the website? I'll take a quick look.

I don't actually have it live anywhere, but I've put together a stripped down version here:

 

http://s000.tinyupload.com/download.php?file_id=04271175585902134297&t=0427117558590213429795363