Jquery UI 对话框只显示一次

Question

我对三个部分有一个简单的标记。单击用户名时，我想在弹出窗口中显示用户信息。我为此使用了 Jquery UI dialog()。此弹出窗口仅针对每个部分打开一次。我尝试先设置对话框（{autoOpen：false}），然后尝试调用对话框（'open'）。但在那种情况下，对话框甚至一次都没有打开。这是代码

$(function() {


  /*
                  if I uncomment below line then it doesn't work for a single time                     and gives no erroR
                  
                  */

  // $(".ideatorInfo").dialog({autoOpen:false});
  $(".ideatorInfo").hide();
  $('.ideator').on('click', function() {
    $(this).parent().find(".ideatorInfo").show().dialog({
      autoOpen: false
    }).dialog('open');
  });
});

.ideatorInfo {
  border-bottom: 1px solid;
  font-size: 1.5em;
  padding-bottom: .3em;
}
.ideator {
  background-color: #c4dfe6;
  cursor: pointer;
  margin-bottom: .5em;
}
.ideator:hover {
  background-color: #003b46;
  color: white;
}
.ideaContent {
  margin: 3em;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<section id="allideas">
  <section class="ideaContent">
    <section class="ideator">	<span class="name">
		 	 Name: John Mayer 
		 	</span>	
    </section>
    <section class="ideaWrapper">
      <section class="idea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.</section>
      <section class="ideaStatus"> <span class="spantitle">Status</span>
        <span class="spanContent">In Process</span>

      </section>
    </section>
    <section class="suggWrapper">
      <section class="suggestion">here is my suggestion</section>
    </section>
    <section class="ideatorInfo">	<span><img class="myimg" alt=":"/></span>
      <span class="name">
		 	 John Mayer 
		 	</span>
      <span class="spantitle">Email: </span>
      <span class="spanContent">John.Mayer@star.com</span>
      <span class="spantitle">SAP ID: </span>
      <span class="spanContent">this</span>	 <span class="spantitle">Designation: </span>
      <span class="spanContent">this</span>		<span class="spantitle">Department:</span>
      <span class="spanContent">this</span>	
    </section>
  </section>
  <section class="ideaContent">
    <section class="ideator">	<span class="name">
		 	 Name: Lily Wills 
		 	</span>	
    </section>
    <section class="ideaWrapper">
      <section class="idea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.</section>
      <section class="ideaStatus"> <span class="spantitle">Status:</span>
        <span class="spanContent"> In Process</span>

      </section>
    </section>
    <section class="suggWrapper">
      <section class="suggestion">here is my suggestion</section>
    </section>
    <section class="ideatorInfo">	<span><img class="myimg" alt=":"/></span>
      <span class="name">
		 	 Lily Wills 
		 	</span>
      <span class="spantitle">Email: </span>
      <span class="spanContent">Lily.Wills@star.com</span>
      <span class="spantitle">SAP ID: </span>
      <span class="spanContent">this</span>	 <span class="spantitle">Designation: </span>
      <span class="spanContent">this</span>		<span class="spantitle">Department:</span>
      <span class="spanContent">this</span>	
    </section>
  </section>
  <section class="ideaContent">
    <section class="ideator">	<span class="name">
		    Name: Tom Morison
		 	</span>	
    </section>
    <section class="ideaWrapper">
      <section class="idea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.</section>
      <section class="ideaStatus"> <span class="spantitle">Status:</span>
        <span class="spanContent"> In Process</span>

      </section>
    </section>
    <section class="suggWrapper">
      <section class="suggestion">here is my suggestion</section>
    </section>
    <section class="ideatorInfo">	<span><img class="myimg" alt=":"/></span>
      <span class="name">
		 	 Tom Morrison 
		 	</span>
      <span class="spantitle">Email: </span>
      <span class="spanContent">Tom.Morrison@star.com</span>
      <span class="spantitle">SAP ID: </span>
      <span class="spanContent">this</span>	 <span class="spantitle">Designation: </span>
      <span class="spanContent">this</span>		<span class="spantitle">Department:</span>
      <span class="spanContent">this</span>	
    </section>
  </section>
</section>

这里是小提琴：http://jsfiddle.net/satyanshua/ah1quj0d/1/

Answer 1

因为 .dialog 会将兄弟姐妹 .ideatorInfo 移动到其他地方（从开发工具，它被移动到部分的尾部），所以第二次单击它们时，您无法使用 $(this).parent().find(".ideatorInfo")得到它。

您可以保留该元素的引用，然后无论它被移动到哪里，您仍然可以使用.dialog('open') 打开它。 jsFiddle

$(function() {
    $(".ideatorInfo").hide();
    $('.ideator').on('click',function(){
        if (!this.$modal) {
            this.$modal = $(this).siblings(".ideatorInfo").dialog({
                autoOpen: false
            });
        }
        this.$modal.dialog('open');
   });
 });

Answer 2

请查看此版本：http://jsfiddle.net/ah1quj0d/5/ 变化是每次点击都会复制需要的块.ideatorInfo并添加到对话框中：

var $elem = $(this).parent().find(".ideatorInfo");
var $copy = $elem.clone();
$copy.appendTo(document.body).show().dialog({autoOpen:false}).dialog('open');

在您的情况下，关闭第一个对话框后，DOM 元素 .ideatorInfo 已被删除，无法再次显示。

Answer 3

这个这个：

 $(".ideatorInfo").hide();
      $('.ideator').on('click', function() {
        $(this).parent().find(".ideatorInfo").each(function(){
           $(this).show();
           $(this).dialog({
               autoOpen: false
           }).dialog('open');
        }
      });