Question

我有三个部分的简单标记。我想在单击用户名时在弹出窗口中显示用户信息。我已经使用了Jquery UI dialog（）。这个弹出窗口只为每个部分打开一次。我先尝试设置对话框（{autoOpen：false}），然后尝试调用对话框（＆＃39;打开＆＃39;）。但在这种情况下，即使一次也没有打开对话框。这是代码

＆＃13;

$(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');
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

因为.dialog会将siblins .ideatorInfo移动到其他地方（来自dev-tool，它被移动到部分的尾部），所以第二次单击它们时，你无法使用它{ {1}}得到它。

您可以保留对该元素的引用，然后无论它在何处被移动，您仍然可以使用$(this).parent().find(".ideatorInfo")来打开它。 jsFiddle

.dialog('open')

Answer 2

请检查此版本：http://jsfiddle.net/ah1quj0d/5/ 更改是每次单击时，复制所需的块import Ember from 'ember'; export default Ember.Controller.extend({ queryParams: ['search'], search: null });并将其添加到对话框中：

.ideatorInfo

在第一个对话框关闭后的情况下，DOM元素var $elem = $(this).parent().find(".ideatorInfo"); var $copy = $elem.clone(); $copy.appendTo(document.body).show().dialog({autoOpen:false}).dialog('open');已被删除，无法再显示。

Answer 3

这个：

pip install pygments markdown

Jquery UI对话框只显示一次

3 个答案: