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元素（因此它是唯一的并且克隆它可能会有一些意想不到的问题）。

解决方案：

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

（注意：由于克隆也会复制id="serviceTemplate"，这是一个不好的做法，因为id应该是唯一的。删除id并使用$(".serviceField").first()之类的东西来定位原始元素。）

＆＃13;

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

＆＃13;

* {
  -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;
}

＆＃13;

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

＆＃13;

jQuery克隆然后插入克隆许多次

1 个答案: