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

ProgramBox

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

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#jquery #clone #select2

#jquery #клонировать #jquery-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>

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

//dummy text : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Фазелл в lectus orci. Quisque maximus hendrerit consequat. 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. Integer mollis non odio et pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fringilla sem, facilisis malesuada orci varius in. Nullam tristique nisi sed sem mattis, a finibus magna mollis. Fusce erat sem, semper ac vulputate sit amet, imperdiet sagittis ex

Ответ №1:

Используя $(".barang_in_clone select").addClass("select2"); селектор, вы можете добавить класс в select клонированного 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. добавлена его работа и класс select2 . но почему плагин select2 не работает? я знаю select2 , что у меня проблема, когда clone() как это исправить в моем коде?

2. Вы написали $(‘.select2’).select2(); после того, как класс select2 был применен в клонированном HTML?

3. Хорошо, но это должно быть сразу после клонирования. Пожалуйста, посмотрите на фрагмент.

4.когда не клонируйте, а отображайте в классе hidden_input block , и я добавил select2 . его работа

5. Пожалуйста, проверьте обновленный фрагмент, в котором я применил select2.

Ответ №2:

Вместо этого с помощью

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

Это будет работать 🙂