Bootstrap modal event.relatedTarget 在下拉列表中不起作用

Question

我有一个foreach循环，它遍历规则列表，每个规则都有一个引导下拉列表来编辑规则。下拉链接应该打开一个模态，它确实打开了。

问题是event.relatedTarget始终具有来自第一个下拉项的数据，而不是已单击的实际下拉项。如果我删除下拉列表，只使用普通链接，一切都会正常工作。

我在这里做错了什么？

带下拉菜单的循环：

@foreach( $rules as $rule )
<a href="#" OnClick="event.preventDefault();" role="button" id="dropdownMenuLink{{ $rule->id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-1,8">{{ $rule->name }} <i class="fas fa-caret-down"></i></a><br />
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink{{ $rule->id }}">
<li><a class="dropdown-item" href="#" OnClick="event.preventDefault();" data-toggle="modal" data-target="#editRule" data-id="{{ $rule->id }}" data-name="{{ $rule->name }}">Edit rule</a></li>
</ul>
@endforeach

模态：

<div class="modal fade" id="editRule" tabindex="-1" role="dialog" aria-labelledby="editRuleCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content text-white bg-dark">
<form method="POST" action="#">
@csrf
<div class="modal-header">
<h5 class="modal-title" id="editRuleCenterTitle">Edit Rule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<div class="col-md-12">
<label for="ruleName" class="form-label">Rule name</label>
<input id="ruleName" type="text" class="form-control" name="ruleName" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Update Rule</button>
</div>
</form>
</div>
</div>
</div>

脚本：

@section( 'scripts' )
<script>
$( '#editRule' ).on( 'show.bs.modal', function ( event ) {
console.log( event.relatedTarget );
var button = $( event.relatedTarget );
var id = button.data( 'id' );
var name = button.data( 'name' );
var modal = $( this );
modal.find( '.modal-title' ).text( 'Edit rule: ' + name );
modal.find( '.modal-body input' ).val( name );
});
</script>
@endsection
``

Answer 1

用类下拉框将foreach循环包裹在div中：

@foreach( $rules as $rule )
<div class="dropdown">
<a href="#" OnClick="event.preventDefault();" role="button" id="dropdownMenuLink{{ $rule->id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-1,8">{{ $rule->name }} <i class="fas fa-caret-down"></i></a><br />
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink{{ $rule->id }}">
<li><a class="dropdown-item" href="#" OnClick="event.preventDefault();" data-toggle="modal" data-target="#editRule" data-id="{{ $rule->id }}" data-name="{{ $rule->name }}">Edit rule</a></li>
</ul>
</div>
@endforeach