我从
<form method="POST" id="postPengajuan">
<div class="modal-body">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
<div class="form-group">
<label for="nama_bagian" class="">Nama Kegiatan</label>
<textarea name="nama_bagian" id="nama_bagian" class="form-control" rows="1"><?= $dataKegiatan->nama_kegiatan ?></textarea>
</div>
<div class="form-group">
<label for="nama_pengaju" class="">Nama Pengaju</label>
<select id="nama_pengaju" class="single-select" name="nama_pengaju">
<?php foreach ($dataUser as $data) : ?>
<?php if ($data->role_id == 1 || $data->role_id == 3) : ?>
<option value="<?= $data->nama_lengkap ?>"><?= $data->nama_lengkap ?></option>
<?php endif; ?>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="tanggal" class="">Tanggal</label>
<input type="text" class="form-control date" name="tanggal" id="tanggal">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
<div class="form-group">
<label for="nama_teknisi" class="">Nama Teknisi</label>
<textarea name="nama_teknisi" id="nama_teknisi" class="form-control" rows="1"></textarea>
</div>
<div class="form-group">
<label for="nip_ppk" class="">NIP PPK</label>
<input type="text" class="form-control" name="nip_ppk" id="nip_ppk">
</div>
</div>
</div>
<div class="d-flex justify-content-center mt-3">
<h4>Detail Pengajuan</h4><br>
</div>
<table class="table tableDetail">
<thead>
<tr>
<th>Ruangan</th>
<th>Nama Barang</th>
<th>Jumlah</th>
<th>Keterangan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
<select class="single-select" name="id_ruangan[]">
<?php foreach ($dataRuangan as $data) : ?>
<option value="<?= $data->id_ruangan ?>"><?= $data->nama_ruangan ?></option>
<?php endforeach; ?>
</select>
</div>
</td>
<td>
<div class="form-group">
<select class="single-select" name="id_barang[]">
<?php foreach ($dataBarang as $data) : ?>
<option value="<?= $data->id_barang ?>"><?= $data->nama_barang ?></option>
<?php endforeach; ?>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="number" min="1" class="form-control" id="jumlah" name="jumlah[]" value="1">
</div>
</td>
<td>
<div class="form-group">
<textarea id="keterangan" name="keterangan[]" class="form-control"></textarea>
</div>
</td>
<td>
<div class="form-group">
<button type="button" class="btn btn-xs btn-primary" id="tambahRow"><i class="fa fa-plus"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary" id="tambahPengajuan">Simpan</button>
</div>
</div>
</form>我有一个jQuery函数来从<tbody>部分克隆<tr>元素。
<script>
$(document).ready(function() {
$('#tambahRow').click(function() {
var clone = $('table.tableDetail tbody tr').first().clone();
clone.find('input, textarea').val('');
clone.find('#tambahRow').attr('id', 'deleteRow').removeClass('btn-primary').addClass('btn-danger').html('<i class="fa fa-trash"></i>');
$('table.tableDetail tbody').append(clone);
});
$('table.tableDetail').on('click', '#deleteRow', function() {
$(this).closest('tr').remove();
});
});但是select标记有一个问题，它的属性是class="single-select"。问题出在select2库上。当我克隆它时，select2库不能正常工作。相反，它显示为常规的输入标记，而不能滚动和选择选项。你能告诉我为什么会这样吗？
1条答案
按热度按时间m0rkklqb1#
根据the documentation，当您在select元素上调用
$('.js-example-basic-single').select2();时，select2将应用于该元素。据推测，这将删除原始的选择器元素，用一组不同的HTML元素替换它，并向它们添加一些事件侦听器。
克隆行时，将克隆行中的所有内容：包括那些元素，但不包括事件处理程序。
如果你看the documentation for clone，你会看到：
withDataAndEvents（默认值：false）
类型：布尔
一个布尔值，指示事件处理程序是否应与元素沿着复制。从jQuery 1.4开始，元素数据也将被复制。
.一个可选的参数**，你没有使用**，它将复制事件处理程序。添加该 * 可能 * 足以完全克隆select2功能。
如果不是，考虑使用template作为新DOM节点的来源，并在从模板复制到要放置它的位置后，在新创建的
<select>节点上显式调用select2()。