[jQuery] Issue with loading content once using AJAX and display it as a SimpleModal (plugin)

[mh.karls...@gmail.com]

I'm using AJAX to load content into a DIV and display it as a simple
modal (using the SimpleModal plugin). In order to limit the requests
to the server I would like to only load the content once, but that's
when I run into trouble. Let me show you the code and then I will
explain what happens.

HTML:
<div id="sidebar">
   <a id="settings" href="#" class="settings">Settings</a>
   <a id="options" href="#" class="test">Test</a>
</div>
<div id="content">Default Text</div>

JAVASCRIPT:
var isLoaded = false;

$(document).ready(function () {
        // click event handler for 'settings'
        $('#sidebar a.settings').click(function (e) {
                if (!isLoaded) {
                        $("#content").load("settings.htm");
                        isLoaded = true;
                }
                $("#content").modal();
        }
        // click event handler for 'test'
        $('#sidebar a.test').click(function (e) {
                $("#content").modal();
        }
}

function hideModal(){
        $.modal.close();
}

The first time I click on the link 'Settings' the content from
'settings.htm' is correctly displayed as a simple modal. But each time
I click on the link after that it will display the DIV's initial text
("Default Text"). However, if I remove the following line;

$("#content").modal();

from the event handler for the link 'settings' and then use the 'test'
link instead it displays correctly each time. I can't find the reason
why this wouldn't work in the event handler for 'settings'? By viewing
the rendered HTML I can confirm that content of the 'settings.htm' is
correctly injected to the content div after the initial click. But I
can't figure out what happens after that and how the default text make
it back in there. I'm pretty new to jQuery so if anyone can shed some
light on this issue I would really appreciate it.

Thanks, Martin