jQuery UI对话框无法重新打开。

Question

我有两个jQuery UI对话框（彼此无关，但都出现了这种行为）。第一次打开和关闭时它们都表现得很完美。但是，一旦它们第一次关闭后，它们就无法重新打开。以下是其中一个的代码，另一个具有相同的结构。我没有在任何地方调用 'destroy()' 或 'remove()'，所以我不知道为什么它们不能正常工作。下面是我的代码：

$(".qr_link").click(function(){
  openQr(this);
});

function openQr(that){
  var title = $(that).parent().parent().children("p.resume-name").text();
  var qr = $(that).parent().parent().children(".qr_image");

  $(qr).dialog({
    title: title,
    width: 'auto',
    height: 'auto',
    modal: true
  });
}

我的标记：

<div class="resume">
  <p class="resume-name"><%= link_to(offer.name, public_url(offer.public_id, :host => ApplicationSetting.short_domain, :params => {:rid => @recruiter_id})) %></p>
  <p id="resume_links">- 
    <%= link_to("QR", "#", :class => "qr_link") %>
    <%= link_to("X", "#", :class => "remove_link") %>
    <%= link_to("Preview", "#", :class => "preview_link") %>
  </p>
  <%= qr_image(public_url(offer.public_id, :host => ApplicationSetting.short_domain, :params => {:rid => @recruiter_id}), "200x200", "hide qr_image")%>
  <p class="resume-tags"><span class="resume-tags-label">Tags: </span><span class="resume-tags-value">
    <%= offer.tags.join(", ") %>
  </p>
  <p class="resume-description"><%= offer.description %></p>
</div>

提前感谢。

---

更新

---

最初，当页面加载时，我加载了 QR 图像，但是我将其隐藏。它在对话框中显示得很好，但是当对话框出现时，QR 图像从 HTML 中删除了！所以我猜重构后的问题是："为什么我的 QR 码被删除了？"

- starscream_disco_party

---

你的标记语言是什么样子的？ - Andrew Whitaker

刚刚在 @AndrewWhitaker 的代码中添加了标记。 - starscream_disco_party

Answer 1

$(qr).dialog({...}) 会初始化并打开对话框，但只有一次。如果需要再次打开，需要在元素上调用.dialog('open')。

至于更新的问题：对话框会将其内容从原来的位置移动到一个带有样式的容器中，然后将其附加到文档末尾。但是，您现在获取对话框元素的方式不起作用了，因为它已经被移动了。

我建议使用ID引用对话框内容，而不是通过DOM遍历。您可以将该ID存储为被单击的元素上的数据属性。

- Nal

---

耶，耶，那就是问题所在。非常感谢@Nal。 - starscream_disco_party

“使用ID引用对话框内容而不是遍历DOM”，这个建议非常好。这对我帮助很大。 - deebs

Answer 2

我无法复制您的错误。您能否在JSFiddle上提供完整的代码？

在启动模态框之前尝试调用destroy方法。

$(":ui-dialog").dialog("destroy");

- Luqmaan

---

那并没有解决它，不过还是谢谢。我找到了这个问题的答案，但这只是打开更多探索之门:/ - starscream_disco_party