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

Posted 2023-03-14

【中文标题】使用 e.relatedTarget 从 <a> 获取数据到模态有时会给出 undefined

【英文标题】：Get data from <a> to modal using e.relatedTarget sometimes give undefined

【发布时间】：2021-12-24 11:19:36

【问题描述】：

我正在使用标签创建一个按钮，我想将其上的数据传递给模态。我已经尝试过了，它正在工作。但有时数据不会出现在模态中（如果我控制台记录它返回未定义的变量），有时它会出现。我正在使用 laravel 刀片

这是我的脚本：

<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>

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

【问题讨论】：

检查这个堆栈溢出问题，它和你的类似：***.com/questions/26187370/…

【参考方案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>