jquery-ui之jQuery UI 对话框不会重新打开

del 阅读:32 2024-10-01 17:34:08 评论:0

我有两个 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).dialog({...}) 只初始化并打开对话框一次。如果你想再次打开它,你需要在元素上调用 .dialog('open')

关于更新后的问题:对话框将其内容从您拥有的位置移动,将其包装在具有样式的容器中,然后将其附加到文档的末尾。但是,您获取对话框元素的方式现在将无法使用,因为它已被移动。

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


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号