为什么单击用于删除注册类型的"Remove"链接时，它显示为删除会议的模式？

Question

我有一个文件，它有两个模式，一个用于删除会议，另一个用于移除注册类型。

问题是，当我单击"Remove"链接打开模态以删除具有id为"removeRtype"的div的注册类型时，出现的模态始终是删除具有id"removeConference"的div会议的模态。

你知道问题出在哪里吗？

下面是两个模态代码。

删除注册类型模式：

链接到开放注册类型模式：

<label class="form-check-label" for="exampleRadios1">
{{$rtype->name}} <a data-toggle="modal" class="btn btn-sm btn-outline-light-gray ml-4"
id="removeRtype"
data-target=".bd-example-modal-lg" data-modal="removeRtype" href=""><i class="fa fa-times" aria-hidden="true"></i> Remove</a>
</label>

模式删除注册类型：

<div class="modal fade bd-example-modal-lg" id="removeRtype" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" data-modal="removeRtype">Remove registration type</h5>
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row d-flex justify-content-center">
<p>Remove registtration type?</p>
<button class="btn btn-outline-primary" id="cancel_remove" href="#"  data-dismiss="modal">No</button>
<a class="btn btn-primary ml-2" id="confirm_remove"
href="{{route('rtype.remove', ['id' => $conference->id])}}">No</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="close_login_modal" class="btn btn-primary"
data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>

打开模式以删除会议的链接：

@if($conference->registrations->count() == 0)
<a  data-toggle="modal" class="btn btn-outline-light-gray ml-2" id="removeConference"
data-target=".bd-example-modal-lg" href="">Remover</a>
@endif

移除会议的模式：

<div class="modal fade bd-example-modal-lg" id="removeConference" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" data-modal="removeConference">Remove conference</h5>
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row d-flex justify-content-center">
<p>Remove conference?</p>
<button class="btn btn-outline-primary" id="cancel_remove" href="#"  data-dismiss="modal">No</button>
<a class="btn btn-primary ml-2" id="confirm_remove"
href="{{route('conference.remove', ['id' => $conference->id])}}">No</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="close_login_modal" class="btn btn-primary"
data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>

Answer 1

这样试试：

第一：

<label class="form-check-label" for="exampleRadios1">
{{$rtype->name}}
<a data-toggle="modal" class="btn btn-sm btn-outline-light-gray ml-4" href="#removeRtype">
<i class="fa fa-times" aria-hidden="true"></i> Remove
</a>
</label>

第二：

@if($conference->registrations->count() == 0)
<a  data-toggle="modal" class="btn btn-outline-light-gray ml-2"
href="#removeConference">Remover</a>
@endif

我看到的另一件事是，你有相同id的模态和链接，这是一个问题：

id属性为HTML元素指定一个唯一的id(该值在HTML文档中必须是唯一的(。