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

Question

我有这个代码根据表中的数据填充字段，该数据由单击updateinputSediaModal触发，该字段回显 1 个数据 ID 以触发 ajax 函数以填充updateinputSediaModal字段表单，它在 chrome 浏览器中填充函数工作，但不在 Firefox 中。

在我的查看页面

<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 而不是 CLASS。