具有数据属性的打开模式无法正常工作

Question

我在下面的代码中显示了有关特定大会注册的表格信息：

@foreach($conference->registrations as $registration)
    <tr>
        <td>{{$registration->customer->name}} {{$registration->customer->surname}}</td>
        <td>{{ $registration->participants->count() }}</td>
        ...
        <td>
        <a class="btn btn-primary" id="showDetails"  data-regid="{{$registration->id}}">Details</a>
        </td>
</tr>
@endforeach

然后使用“详细信息”链接打开此页面中的模式，以便显示该特定注册的详细信息。但是由于每个注册都需要有自己的模式来显示其具体细节，我将模式放在 foreach 中并添加注册 id，如“id="registrationDetails-{{ $registration->id }}”。

但是当在不出现模式的任何行中单击“详细信息”链接时，它无法正常工作。

你知道问题出在哪里吗？

模态代码：

<div class="modal fade"  id="registrationDetails-{{ $registration->id }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">

            <!-- User that did the registration -->
            <dl>
              <dt>Name</dt>
              <dd>{{ $registration->customer->name }}</dd>
              <dt>Email</dt>
              <dd>{{ $registration->customer->email }}</dd>
            </dl>

            @foreach ($registration->participants as $participant)

            <!-- Participant N -->
            <dl>
              <dt>Name</dt>
              <dd>{{ $participant->name }}</dd>
              <dt>Surname</dt>
              <dd>{{ $participant->surname }}</dd>
              <dt>Ticket Type</dt>
              <dd>{{ $participant->ticket_type->name }}</dd>
            </dl>

            @endforeach
          </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>

jQuery:

   @section('scripts')

    <script type="text/javascript" src="{{url('js/jquery-ui.js')}}"></script>

    <script type="text/javascript">
        $(function() {

            $(".showDetails").on("click", function () {
                alert("test");
                let regID = $(this).data('regid');
                alert(regID);

                $('#registrationDetails-'+regID).modal('show');
            });

        });

        </script>
@endsection

Answer 1

DOM id 应该是唯一的，但您有多个 #showDetail id。

把它改成一个类：

@foreach($conference->registrations as $registration)
    <tr>
        <td>{{$registration->customer->name}} {{$registration->customer->surname}}</td>
        <td>{{ $registration->participants->count() }}</td>
        ...
        <td>
        <a class="btn btn-primary showDetails" data-regid="{{$registration->id}}">Details</a>
        </td>
</tr>
@endforeach

和

$(".showDetails").on("click", function () {
    let regID = $(this).data('regid');
    alert(regID);

    $('#registrationDetails-'+regID).modal('show');
});