jQuery 对话框打开（不止一次）？

Question

我在网上找到了一些 jQuery Dialog 的 jQuery 代码，效果很好。我遇到的问题是，当我单击链接图像打开对话框时，它会按原样打开，但是如果我关闭对话框并再次单击链接图像，它将不会重新打开 jQuery 对话框。

这里是 jQuery 代码：

$(document).ready(function(){
       $('#gravatarprofilemoreinfoshow').click(function(){
           $('#gravatarprofilemoreinfo').dialog({
               modal:true,
               resizable: false,
               draggable: true,
               width: '486px',
               height: 'auto',
               hide: 'size',
               autoOpen: true,
               buttons:{ "Close": function() { $(this).dialog("close"); } },
               close: function(ev, ui) { $(this).remove(); }
           });
       });
   });

HTML 标记是：

<a href="#" id="gravatarprofilemoreinfoshow" rel="/somelink" >
<img class="profileimgright profileimgframe" alt="Profile Image" src="/url/to/image" />
</a>

如何调整代码？还有一种方法可以更改代码，使其不依赖于唯一 ID？

我问的原因是我想在我的网站上使用上面的 jQuery 代码来显示不同的信息，但是上面的代码需要一个唯一的名称（抱歉，不确定他们在 jQuery 中如何称呼它）并且希望代码可以重复使用我的网站。

Answer 1

你应该删除该行

close: function(ev, ui) { $(this).remove(); }

问题是它在关闭后会删除对话框和内容，因此您无法在第二次单击时使用它。看看jQuery Remove

此外，要重用此代码，您可以执行以下操作。声明在单击时注册对话框的方法。此方法将传递图像和对话框的选择器

function registerDialogOnImageClick($image, $dialog){
      $image.click(function(){
           $dialog.dialog({
               modal:true,
               resizable: false,
               draggable: true,
               width: '486px',
               height: 'auto',
               hide: 'size',
               autoOpen: true,
               buttons:{ "Close": function() { $(this).dialog("close"); } },
           });
       });
   }

可以从任何地方调用此代码，传递图像和对话框的选择器

$(document).ready(function(){
   registerDialogOnImageClick($('#gravatarprofilemoreinfoshow'), $('#gravatarprofilemoreinfo');
});