Bootstrap modal event.relatedTarget 在下拉菜单中不起作用

Posted

技术标签:

【中文标题】Bootstrap modal event.relatedTarget 在下拉菜单中不起作用【英文标题】:Bootstrap modal event.relatedTarget doesn't work inside dropdown 【发布时间】:2021-04-08 00:03:30 【问题描述】:

我有一个 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
``

【问题讨论】:

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

【讨论】:

哇,好用,谢谢!为什么它周围需要一个名为 dropdown 的 div? 因为使用 ut,下拉菜单的引导结构会以某种方式中断。

以上是关于Bootstrap modal event.relatedTarget 在下拉菜单中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

js学习之--Bootstrap Modals(模态框)

bootstrap modal 模态框拖拽扩展

bootstrap 模态框 modal 插件在一个含有多个页面

Bootstrap 4 .modal('hide') 不工作

新手问题,AngularJS,bootstrap modal 怎么获取数据

Bootstrap模态框(Modal)插件