Problem with gallery and .load() method

Problem with gallery and .load() method

I've started form writing a simple function, which after clicking the thumbnail displays a full-size photograph in a separate DIV.
$('document').ready(function()
{
   $("#gallery a").click(function()
   {
      imgHref = $(this).attr("href");
      $('#content').html('<img src="'+imgHref+'" />');
      return false;
   });
});


Then I've created a menu, which loads next pages of my gallery by creating their filenames from identifier of certain link.
$('document').ready(function()
{
   $("#menu a").click(function()
   {
      $("#content").load($(this).attr('id')+".html");

      return false;
   });
});


Both functions work perfectly when separated, but combined create some problems. After entering the main page of my gallery(let's call it gallery.html) the first function correctly displays enlarged photos. After I click a link from the menu, according to the expectations, the content of DIV changes, but after this operation the first function stops working. Only typing a certain page number in the address bar(for example gallery2.html) "brings the function back to life".

Until now, I've came only with idea of placing the first function in every file of my gallery. It works but is not elegant ;)

Any suggestions how to deal with it?