jQuery克隆，然后InsertAfter多次克隆

Question

我正在尝试创建一个动态表单来向业务合作伙伴演示。

目标是在单击按钮时能够根据需要添加选择元素。然而，当它被点击时，它会重复模板两次，而不仅仅是一次。

下面是我尝试过的代码和这是JSFiddle的几个变体

$("#serviceTemplate").eq(0).clone().insertAfter(".serviceField:last");

$("#serviceTemplate").clone().insertAfter(".serviceField:last");

$("#serviceTemplate").eq(0).clone().insertAfter($(".serviceField").last());

Answer 1

这个想法很简单，因为您使用$('select').material_select();来启动所有的select元素(因此它是唯一的和克隆的，它可能有一些意想不到的问题)。

解决方案：

1. 单击ADD时，调用$('select').material_select('destroy');销毁并获取原始元素
2. 现在你可以克隆它并附加
3. 启动所有选择使用$('select').material_select();

(注意:由于克隆也将复制id="serviceTemplate"，这是一个错误的做法，因为id应该是唯一的。)删除id，并使用类似于$(".serviceField").first()的方法来锁定原始元素。)

​

$(document).ready(function() {
  $('select').material_select();
});

$("#addBtn").click(function() {
  $('select').material_select('destroy');
  $(".serviceField").last().after($(".serviceField").first().clone());
  $('select').material_select();
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
}

form {
  padding: 2rem 0;
}

nav li a {
  padding: 0 .65rem;
}

nav,
#search {
  background: #eee !important;
}

.brand-logo h4 {
  color: #444;
}

.brand-logo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

#table {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row">
    <form name="demo" id="demo" class="row">
      <div class="row">
        <div class="input-field col s12 m4">
          <input type="text" class="validate" placeholder="Your name..." />
          <label for="name">Full Name</label>
        </div>

        <div class="input-field col s12 m4">
          <input type="text" class="validate" placeholder="mm/dd/yyyy" required/>

          <label>Desired Appointment Date</label>
        </div>
      </div>

      <div class="row serviceField">
        <div class="input-field col s12 m3">

          <select class="service" required>
							<option value="" disabled selected>-Please Select Service-</option>
							<option value="1" data-cost="90">Virus Removal - $90</option>
							<option value="2" data-cost="20">PC Tune-Up - $20</option>
					</select>

          <label>Service Required</label>
        </div>
      </div>



      <div class="row">
        <div class="input-field col s12 m3">
          <div id="addBtn" class="btn black white-text">Add Another Service</div>
        </div>
      </div>
    </form>
  </div>
</div>

​