克隆后在子级中添加类

时间:2016-09-29 09:55:32

标签: jquery clone select2

我想在克隆之后在子节点中添加类。我想添加类select2,因为当我克隆select2时,它没有响应。



$(document).ready(function() {
  addBarang();
});

function addBarang() {
  var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone");
  $(".target_clone:last").append(new_barang);
  //        $(".barang_in_clone:has(select)").addClass("select2");
}

$('body').on('click', '.btn_kurangi_barang', function() {
  $(this).closest('.barang_in_clone').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="hidden_input" style="display: none">
    <div class="barang_in">
      <label class="col-md-4 control-label">Kode Hanca</label>
      <select name="id_vendor_detail" class="form-control" required="">
        <option value="">- PILIH -</option>
        <option value="1">- Orange -</option>
        <option value="2">- Pink -</option>
        <option value="3">- Red -</option>

      </select>
      <button onclick="addBarang()" type="button" data-toggle="tooltip" data-placement="top" title="tambah vendor" class="btn btn-info btn-flat btn-xs pull-left btn_tambah_vendor"><i class="fa fa-plus"></i> add</button>
      <button type="button" data-toggle="tooltip" data-placement="top" title="kurangi barang" class="btn btn-danger btn-flat btn-xs pull-right btn_kurangi_barang"><i class="fa fa-minus"></i> Remove</button>
    </div>
  </div>
  <div class='target_clone'>
  </div>

</body>
&#13;
&#13;
&#13;

如何在select2中添加select

//虚拟文本:Lorem ipsum dolor坐下来,精神上的adipistur elit。在lectus orci的Phasellus。 Quisque maximus hendrerit consequat。 Donec blandit facilisis est。整数ac massa vitae ante vulputate sagittis nec at nisl。克拉斯坐下来,他们是一个无聊的人。在erat aliquet hendrerit的Duis porta nisl。整数mollis non odio et pellentesque。 Lorem ipsum dolor坐下来,精致的adipistur elit。 Suspendisse cursus fringilla sem,facilisis malesuada orci varius in.Nullam tristique nisi sed sem mattis,finibus magna mollis。 Fusce erat sem,semper ac vulputate sit amet,imperdiet sagittis ex

2 个答案:

答案 0 :(得分:2)

使用$(".barang_in_clone select").addClass("select2");选择器,您可以在选择克隆的HTML中添加类。

请查看以下代码段以便更好地理解。

$(document).ready(function() {
  addBarang();
});

function addBarang() {
  var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone");
  $(".target_clone:last").append(new_barang); 
  $(".barang_in_clone select").addClass("select2");
  $(".select2").select2();
}

$('body').on('click', '.btn_kurangi_barang', function() {
  $(this).closest('.barang_in_clone').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<body>
  <div class="hidden_input" style="display: none">
    <div class="barang_in">
      <label class="col-md-4 control-label">Kode Hanca</label>
      <select name="id_vendor_detail" class="form-control" required="">
        <option value="">- PILIH -</option>
        <option value="1">- Orange -</option>
        <option value="2">- Pink -</option>
        <option value="3">- Red -</option>

      </select>
      <button onclick="addBarang()" type="button" data-toggle="tooltip" data-placement="top" title="tambah vendor" class="btn btn-info btn-flat btn-xs pull-left btn_tambah_vendor"><i class="fa fa-plus"></i> add</button>
      <button type="button" data-toggle="tooltip" data-placement="top" title="kurangi barang" class="btn btn-danger btn-flat btn-xs pull-right btn_kurangi_barang"><i class="fa fa-minus"></i> Remove</button>
    </div>
  </div>
  <div class='target_clone'>
  </div>

</body>

答案 1 :(得分:0)

改为使用

var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone");

试试这个

var new_barang = $(".hidden_input").find(".barang_in").clone();
new_barang.addClass("barang_in_clone");
$(".target_clone:last").append(new_barang);

它会起作用: - )