Jquery UI对话框只显示一次

Jquery UI dialog showing only once

本文关键字：一次 显示 UI 对话框 Jquery      更新时间：2023-09-26

我有三个部分的简单标记。我想在点击用户名时在弹出窗口中显示用户信息。为此，我使用了Jquery UI dialog（）。此弹出窗口对于每个分区仅打开一次。我尝试先设置对话框（｛autoOpen:false｝），然后尝试调用对话框（"打开"）。但在这种情况下，对话框甚至一次都不会打开。这是代码

$(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/

因为.dialog会将siblins .ideatorInfo移动到其他位置（从dev工具中，它被移动到了部分的尾部），所以第二次单击它们时，您无法使用$(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');
   });
 });

请检查此版本：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被删除，无法再次显示。

this this:

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