【发布时间】：2020-08-05 14:03:46
【问题描述】：
我在 jQuery Datatables 中使用 JQuery data-id 时遇到错误。前 10（十）条记录运行良好。但是当我点击导航表进入第二页时，data-id 值没有显示出来。请在下面查看我的代码：
<a href="#" class="btn bg-brown" data-toggle="modal" data-target="#modal_theme_custom"><i class="icon-plus2 pr-2"></i> Tambah Data</a>
<table class="table datatable-basic table-striped table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nama Jenis Obat</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$x = 1;
$sdata = mysqli_query($konek, "SELECT * FROM e_jnsobat ORDER BY nm_jnsobat ASC");
while($ddata = mysqli_fetch_array($sdata)) {
echo "
<tr>
<td class='text-center'>" . $x . ".</td>
<td>" . $ddata['nm_jnsobat'] . "</td>
<td class='text-center'>
<div class='btn-group'>
<a href='#' class='breadcrumb-elements-item dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
<i class='icon-grid3'></i>
</a>
<div class='dropdown-menu dropdown-menu-right' x-placement='bottom-end' style='position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(310px, 40px, 0px);'>
<a href='#' data-toggle='modal' data-target='#modalEdit' data-id='".$ddata['id_jnsobat']."' class='dropdown-item btedit'><i class='icon-pencil7'></i> Edit Data</a>
<div class='dropdown-divider'></div>
<a href='#' data-toggle='modal' data-target='#modalHapus' data-id='".$ddata['id_jnsobat']."' data-nama='".$ddata['nm_jnsobat']."' class='dropdown-item bthapus'><i class='icon-trash'></i> Hapus Data</a>
</div>
</div>
</td>
</tr>
";
$x++;
}
?>
</tbody>
</table>
<div id="modal_theme_custom" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header bg-brown">
<h6 class="modal-title">Tambah Data</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" class="form-control" name="nm_jnsobat" placeholder="Nama Jenis Obat" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="tambahin" class="btn bg-brown">Tambah Data</button>
</div>
</form>
</div>
</div>
</div>
<div id="modalEdit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-600">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body pb-0">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_edit">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" name="nm_jnsobat" class="form-control" placeholder="Nama Jenis Obat" id="nm_jnsobat" required>
</div>
<div class="form-group">
<div class="alert alert-warning">Pastikan data yang anda tambahkan adalah benar.</div>
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="editin" class="btn bg-teal-800">Edit Data</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalHapus" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_hapus">
<div class="modal-header bg-danger">
<h5 class="modal-title">Konfirmasi Hapus Data</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">Anda yakin akan menghapus data <b id="nm_jnsobat_hapus"></b>? Data yang sudah dihapus tidak bisa dikembalikan lagi.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="hapusin" class="btn bg-danger">Ya! Hapus permanen data</button>
</div>
</form>
</div>
</div>
</div>
这是javascript代码：
<script type="text/javascript">
$(document).ready(function() {
$('.btedit').on('click', function() {
const id = $(this).data('id');
$('#id_jnsobat_edit').val(id);
console.log("Datanya : "+id);
$.ajax({
type: 'get',
url: "<?php echo docroot('ajax/jnsobat/'); ?>"+id,
async: false,
dataType: 'json',
success: function(data) {
//console.log("Datanya : "+data);
$('#nm_jnsobat').val(data[0].nm_jnsobat);
}
});
});
$('.bthapus').on('click', function() {
const id = $(this).data('id');
const nama = $(this).data('nama');
$('#id_jnsobat_hapus').val(id);
//$('#nm_userxx').val(nama);
document.getElementById("nm_jnsobat_hapus").innerHTML = nama;
//console.log("data : " + nama);
});
});
</script>
在前 10 次重新编码时，它工作得很好，但是当我单击按钮转到数据表导航的第二页时，数据 ID 不起作用...我不知道问题出在哪里...对不起我的英语...
【问题讨论】：
-
使用
$('.btedit').on('click', function() {})，您只是将单击处理程序绑定到具有该类的元素，这些元素当时存在于文档中。您的问题的解决方案称为事件委托，因此请仔细阅读。 -
但为什么前 10 条记录运行良好？
-
改用
$(document).on('click', '.btedit', function() { -
why 是因为 javascript 的本质，以及“运气不好”。以正确的方式做事，然后你就不会猜测什么时候会正常工作。
-
@LeviCole 非常感谢...这解决了我的问题...再次感谢您，再次感谢您...
标签： javascript php jquery datatable