JS onclick事件在Firefox中不起作用，但在基于codeigniter和bootstrap的chrome中工作

Question

我有这段代码来填充表中的数据，这些数据由单击触发updateinputSediaModal回显 1 data-id 以触发 ajax 函数以填充updateinputSediaModal字段表单，它在 chrome 浏览器中填充函数工作，但不在火狐中填充函数。

在我的视图页面中

<table id="inputsedia_tb" class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Kode Persediaan</th>
<th scope="col">Jurusan</th>
<th scope="col">Uraian</th>
<th scope="col">Satuan</th>
<th scope="col">User Penginput</th>
<th scope="col">Tanggal Input</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
<?php foreach ($sediaMaster as $sm) : ?>
<tr>
<th scope="row"><?= $i; ?></th>
<td><?= $sm['id_sedia']; ?></td>
<td><?= $sm['nama_jur']; ?></td>
<td><?= $sm['nama_sedia']; ?></td>
<td><?= $sm['sedia_satuan']; ?></td>
<td><?= $sm['user_input']; ?></td>
<td><?= $sm['tgl_input']; ?></td>
<td>
<a href="" data-toggle="modal" data-target="#updateinputSediaModal" class="badge badge-success updateinputSediaModal" data-id="<?= $sm['id_sedia']; ?>">Ubah</a>
<a href="<?= base_url('persediaan/delmasterSedia/') . $sm['id_sedia']; ?>" onclick="return confirm('Menghapus master data barang ini akan menghapus semua data yang berkaitan dengan barang ini (stok masuk, stok keluar dan sisa stok), anda ingin melanjutkan ?')" class="badge badge-danger">Hapus</a>
</td>
</tr>
<?php $i++ ?>
<?php endforeach; ?>
</tbody>
</table>
<!-- Modal Update Menu -->
<div class="modal fade" id="updateinputSediaModal" tabindex="-1" role="dialog" aria-labelledby="updateinputSediaLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateinputSediaLabel">Update Data Persediaan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form action="<?= base_url('persediaan/updatemasterSedia') ?>" method="post">
<div class="modal-body">
<input type="hidden" name="id_sediaUpd" id="id_sediaUpd">
<div class="form-group">
<input type="text" class="form-control" id="namasediaUpd" name="namasediaUpd" placeholder="Nama Barang Praktik">
</div>
<div class="form-group">
<input type="text" class="form-control" id="satuanUpd" name="satuanUpd" placeholder="Satuan">
</div>
<div class="form-group">
<input type="text" class="form-control" id="nikUpd" name="nikUpd" value="<?= $user['nik']; ?>" readonly>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Ubah</button>
</div>
</form>
</div>
</div>
</div>

在我的页脚页面中

<script>
//script update input persediaan (persediaan/input persediaan)
$('.updateinputSediaModal').on('click', function() {
const id = $(this).data('id');
$.ajax({
url: "<?= base_url('persediaan/getSediaid'); ?>",
data: {
id: id
},
method: 'post',
dataType: 'JSON',
success: function(data) {
$("#id_sediaUpd").val(data[0].id_sedia);
$("#namasediaUpd").val(data[0].nama_sedia);
$("#satuanUpd").val(data[0].sedia_satuan);
$("#nikUpd").val(data[0].user_input);
}
});
});
</script>

我可以解释一下这是怎么发生的吗？

Answer 1

我看不到你在哪里定义jQuery，所以你得到$没有定义错误吗？

我注意到的另一件事是你有$('.updateinputSediaModal')但我没有看到任何名为updateinputSediaModal的类，但我确实看到了这个元素;

<div class="modal fade" id="updateinputSediaModal" ...

所以也许把$('.updateinputSediaModal')改成$('#updateinputSediaModal')？

因为它是一个 ID 而不是一个类。