Hello,
Please, can you help me? I'm in a hurry...
I have a main page (gallery.asp, Ex.1) that loads, via jQuery ajax, another page (picture.asp, Ex.2)

It's all fine when I first open the "gallery.asp" page: the "picture.asp" page loads into the "test" div with the first record I want ('cause of the snippet marked as "// load first picture onLoad")

In my idea, clicking on the "#next" and "#prev" link (that, please notice, are in the "picture.asp" page - so they are ajax-loaded) should load "/picture.asp?iData=<%= nextRecord %>" and "/picture.asp?iData=<%= prevRecord %>" into "test" div respectively

But of course, nothing happens (no "next" or "prev" page is loaded, and I get no errors)
Please, where am I wrong? Is there a workaround for this?

Thanks

Code:
Ex.1
<div id="test"></div>
...
$(document).ready(function(){
  // load first picture onLoad
  $("#test").load("/picture.asp?iData=1");

  // load next picture when clicking on "#next" link
  $('#next').click(function(event){
    event.preventDefault(); // don't open the page
    $("#test").load($('#next').attr('href')); // load it!
  });

  // load prev picture when clicking on "#prev" link
  $('#prev').click(function(event){
    event.preventDefault(); // don't open the page
    $("#test").load($('#prev').attr('href')); // load it!
  });
});


Ex.2
<img src="<%= rs.("Picture") %>" />
<a href="/picture.asp?iData=<%= prevRecord %>" id="prev">Previous</a>
<a href="/picture.asp?iData=<%= nextRecord %>" id="next">Next</a>