добавить класс в дочерний элемент после клона

Я хочу добавить класс в дочернем элементе после клонирования. Я хочу добавить класс 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>

как добавить класс select2 в select?

// фиктивный текст: Lorem ipsum dolor sit amet, conctetur adipiscing elit. Phasellus at lectus orci. Quisque maximus hendrerit consquat. Donec blandit facilisis est. Integer ac massa vitae ante vulputate sagittis nec at nisl. Cras sit amet sem nec metus sodales eleifend a ac nulla. Duis porta nisl in erat aliquet hendrerit. Целое число mollis non odio et pellentesque. Lorem ipsum dolor sit amet, conctetur adipiscing elit. Suspendisse cursus fringilla sem, facilisis malesuada orci varius in. Nullam tristique nisi sed sem mattis, финибус магна моллис. Fusce erat sem, semper ac vulputate sit amet, imperdiet sagittis ex


jquery clone select2
person wawan Setiyawan    schedule 29.09.2016    source источник
comment
Попробуйте это, пожалуйста, var new_barang = $ (. Hidden_input) .find (.barang_in) .clone (); new_barang.addClass (barang_in_clone); $ (. target_clone: ​​последний) .append (новый_баранг);   -  person Sunny_Sid    schedule 29.09.2016

Ответы (2)


arrow_upward
3
arrow_downward

Используя селектор $(".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>

person Rahul Patel    schedule 29.09.2016
comment
его работа и класс select2 добавлен. но почему плагин select2 не работает? я знаю, select2 есть проблема, когда clone() как исправить это в моем коде? - person wawan Setiyawan; 29.09.2016
comment
Вы написали $ ('. Select2'). Select2 (); после того, как класс select2 был применен в клонированном HTML? - person Rahul Patel; 29.09.2016
comment
Хорошо, но это должно быть сразу после клона. Пожалуйста, посмотрите фрагмент. - person Rahul Patel; 29.09.2016
comment
когда не клонировать и отображать в классе hidden_input block, и я добавил select2. это работает - person wawan Setiyawan; 29.09.2016
comment
Пожалуйста, проверьте обновленный фрагмент, в котором я применил select2. - person Rahul Patel; 29.09.2016
comment
да, это работа. $(".select2").select2(); я помещаю в индексный файл, почему он не работает? - person wawan Setiyawan; 29.09.2016
comment
Вы также должны поместить его после клонированного элемента. Индексный файл будет работать только для предварительно загруженного элемента. Для вновь добавленного элемента вы должны применить его после клонирования, как это сделано во фрагменте. - person Rahul Patel; 29.09.2016
comment
Рахул, не могли бы вы еще раз помочь мне с выбором? У меня проблема с jsfiddle с выбором jsfiddle - person wawan Setiyawan; 29.09.2016
comment
@wawanSetiyawan Я показал ваш новый вопрос. Вы хотите присвоить выбранное значение выбора скрытому входу? - person Rahul Patel; 29.09.2016

arrow_upward
0
arrow_downward

Вместо использования

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

Это будет работать :-)

person Sunny_Sid    schedule 29.09.2016