使用 e.relatedTarget 从 <a> 获取数据到模态有时会给出 undefined

Question

我正在使用标签创建一个按钮，我想将其上的数据传递给模式。我已经尝试过了，而且很管用。但有时数据不会出现在模式中（如果我控制台记录变量它 return undefined），有时它会出现。我正在使用 laravel blade

这是我的脚本：

<script>
        $('.edit').on('click', function() {
            $('#edit').modal('show');
        });

        $('#edit').on('show.bs.modal', function(e) {
            let id = $(e.relatedTarget).data('id');
            let name = $(e.relatedTarget).data('name');
            $(e.currentTarget).find('input[id="store_id"]').val(id);
            $(e.currentTarget).find('input[id="store_name"]').val(name);
        });
    </script>

<a href="javascript:void(0)" data-id={{ $store->id }} data-name={{ $store->store_name }} 
   data-target="#edit" data-toggle="modal" class="btn btn-info btn-sm mb-2">
   <i class="fas fa-pencil-alt edit"></i>
</a>

<div class="modal fade" id="edit" tabindex="-1" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" style="text-align: center" id="edit">Edit External Store</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('manage-external-store.update', $store->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="id" id="store_id" value="">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="store_name">Store Name</label>
                                    <input type="text" class="form-control" id="store_name" name="store_name" value=""
                                        placeholder="Input new store name">
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm float-right mt-2"
                            style="margin-right: 10px">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

有人知道我的代码有什么问题吗？或者也许还有其他方法可以实现这一目标？谢谢

Answer 1

试试这个

<script>
        $('.edit').on('click', function() {
            $('#edit').modal('show');
        });

        $('#edit').on('show.bs.modal', function(e) {
            let id = $(e.relatedTarget).attr('data-id');
            let name = $(e.relatedTarget).attr('data-name');
            $(e.currentTarget).find('input[id="store_id"]').val(id);
            $(e.currentTarget).find('input[id="store_name"]').val(name);
        });
</script>

使用 e.relatedTarget 从 <a> 获取数据到模态有时会给出 undefined

Get data from <a> to modal using e.relatedTarget sometimes give undefined

jquery

laravel

bootstrap-4

bootstrap-modal