使用 e.relatedTarget 从 <a> 获取数据到模态有时会给出 undefined
Get data from <a> to modal using e.relatedTarget sometimes give undefined
我正在使用标签创建一个按钮,我想将其上的数据传递给模式。我已经尝试过了,而且很管用。但有时数据不会出现在模式中(如果我控制台记录变量它 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">×</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>
有人知道我的代码有什么问题吗?或者也许还有其他方法可以实现这一目标?谢谢
试试这个
<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>
我正在使用标签创建一个按钮,我想将其上的数据传递给模式。我已经尝试过了,而且很管用。但有时数据不会出现在模式中(如果我控制台记录变量它 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">×</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>
有人知道我的代码有什么问题吗?或者也许还有其他方法可以实现这一目标?谢谢
试试这个
<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>