在JQuery UI对话框中创建链接“下一个/上一个”

如何解决在JQuery UI对话框中创建链接“下一个/上一个”

| 我有一个相片清单：

<div>
 <a href=\"#\" class=\"open-dialog\" id=\"17\"><img src=/upl/thumb_100_100_2144473683ec519.jpg /></a>
</div>

<div>
 <a href=\"#\" class=\"open-dialog\" id=\"18\"><img src=/upl/thumb_100_100_23688dddd187dc7.jpg /></a>
</div>

<div>
 <a href=\"#\" class=\"open-dialog\" id=\"19\"><img src=/upl/thumb_100_100_684889213b56545.jpg /></a>
</div>

<div id=\'photo-content\'></div>

单击拇指后，我得到JQuery UI对话框：

$(document).ready(function(){

   $(\'.open-dialog\').live(\'click\',function() {

      var id = $(this).attr(\'id\');

        $(\"#photo-content\").load(\'/photo/\' + id).dialog({ //loads PHP file with full size photo and other content

          width: \'700px\',resizable: false,modal: true,buttons: {
              \'Close\': function() { $(this).dialog(\'close\'); }
          },}); 
    });

 });

它成功加载了我需要的所有数据。 所以现在我想在加载的对话框中包含

next/prev

链接。单击

next

后，对话框应该关闭并重新加载新内容。也许没有关闭，只是重新加载...这就是我被卡住的地方。 的HTML：

...
<a href=\"#\" class=\"next\">NEXT</a>
...

javascript：

$(document).ready(function(){

   $(\'.next\').live(\'click\',function() {
   $(\'#photo-content\').dialog(\'close\');
   var next_id = <?=$next_photo?>;

     $(\"#photo-content\").load(\'/photo/\' + next_id).dialog({

          width: \'700px\',buttons: {
              \'Close\': function() { $(this).dialog(\'close\'); }
          }); 
      });

 });

我已经尝试过这种方法，但是每次单击

next

时，我都会看到越来越多的打开的对话框。 有什么建议么？ 提前致谢。