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

Question

我的页面上有一个 div，其中包含一些子元素，现在单击一个按钮，我希望 div 与其子元素一起被克隆，但是这确实有效克隆后元素未显示在原始文件中，我已经研究了一段时间，试图弄清楚为什么会这样。我检查了我的 css 并删除了 "poisition: absolute" 那些在克隆后没有显示的元素，一切正常。有没有办法绕过这个？我很想知道。

这是我的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>

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

这是克隆后的样子：

Answer 1

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

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

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

DEMO

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

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

Cloned Elements Not Showing In Browser

html

css

jquery

clone