javascript - jQuery Clone 然后 InsertAfter 克隆多次

Question

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

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

这里只是我尝试过的代码的一些变体和 here is the 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>