克隆的元素未显示在浏览器中答案

【问题标题】：Cloned Elements Not Showing In Browser克隆的元素未显示在浏览器中
【发布时间】：2015-03-19 23:40:39
【问题描述】：

我的页面上有一个带有一些子元素的 div，现在单击一个按钮，我希望将该 div 与其子元素一起克隆，这可行，但是某些元素在克隆后未显示在原始文件中，我已经研究了一段时间，试图弄清楚为什么会发生这种情况。我检查了我的css并删除了那些在克隆后没有显示的元素的“位置：绝对”并且一切正常。有没有办法绕过这个？我真的很想知道。

这是我的 Javascript：

     $(document).ready(function() {
       $('#lnkAddNewAnswer').click(function() {
         $('.answer-txt-area').first().clone(true, true).appendTo('.answers-container');
       });

       $('.answer-txt-area').hover(
         function() {
           $(this).find('.options').show();
         },
         function() {
           $(this).find('.options').hide();
         }
       );


     });

.answers-container {
  position: relative;
}
.answer-txt-area {
  background-color: #FFFFFF;
  height: auto;
  border: 1px solid #DCDCDC !important;
  border-left: 5px solid #DCDCDC !important;
  resize: none;
  margin-top: 15px;
}
.answer-txt-area .options {
  display: none;
  background-color: rgba(149, 183, 93, 0.2);
  padding: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 9999;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.answer-txt-area .options ul {
  margin: 0 !important;
  padding: 0 !important;
}
.answer-txt-area .options ul li {
  list-style: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answers-container">
  <div class="answer-txt-area">
    <div class="options">
      <ul>
        <li><a class="lnkButton"><i class="glyphicon glyphicon-ok"></i> <span class="text">Set as correct answer</span></a>
        </li>
        <li><a class="lnkButton"><i class="glyphicon glyphicon-remove remove"></i> <span class="text">Remove answer</span></a>
        </li>
      </ul>
    </div>
    <textarea class="form-control" placeholder="Type answer here.." required="required" name="answer[]" cols="50" rows="10"></textarea>
    <div class="selected-answer"><i class="glyphicon glyphicon-ok"></i>
    </div>
  </div>
</div>

这是克隆之前在浏览器中的样子：

这是克隆后的样子：

【问题讨论】：

请添加 fukl 结果 HTML 代码而不是模板代码（无论您使用哪种模板引擎）。我的意思是{{ Form ... 的事情
你能用实际的 HTML 输出代替你的代码 sn-p 吗？
是的，对不起，我一定错过了那部分，我已经编辑了我的问题。
uʍopǝpısdn 的回答解决了我的问题。

标签： jquery html css clone

【解决方案1】：

该元素正在被克隆，只是没有定位到您认为的位置。

给.answer-txt-area一个位置，它会按预期工作：

.answer-txt-area {
    position: relative;
}

DEMO

.answer-txt-area .options 相对于最近定位的祖先进行定位。因为最近定位的祖先是.answers-container，所以初始元素中的.options 和它的每个克隆都位于彼此之上

【讨论】：