Question

我试图在foreach循环中使用Twitter bootsrap进行删除确认。我的代码有效，但每次都删除表中的第一条记录（id传递不正常）。能否请你帮忙。 这是我的代码

<table class="table">
  <thead>
    <th>#</th>
    <th>Name</th>
    <th>Email</th>
    <th>Position</th>
    <th></th>
  </thead>

  <tbody>
    @foreach ($employees as $key => $employee)
    <!-- twitter bootstrap delete confrimation -->
    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="deleteModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="deleteModal">Confirm Remove</h4>
          </div>

          <div class="modal-body">
            <p>You are about to remove a team member.</p>
            <p>Do you want to proceed?</p>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-btn fa-times"></i>Cancel</button>
            {!! Form::open(['route' => ['employees.destroy', $employee->id], 'method' => 'DELETE', 'style' => 'display: inline-block']) !!}
            <button type="submit" class="btn btn-danger btn-ok"><i class="fa fa-btn fa-trash-o"></i>Remove</button>
            {!! Form::close() !!}
          </div>
        </div>
      </div>
    </div>
    <tr>
      <th>{{ (($employees->currentPage() - 1 ) * $employees->perPage() ) + $key + 1 }}</th>
      <td>{{ $employee->name }}</td>
      <td>{{ $employee->email }}</td>
      <td>{{ $employee->position->name }}</td>
      <td class="position-btn-in-the-right input-prepend">
        <a href="{{ route('employees.show', $employee->id) }}" class="btn btn-sm btn-default"><i class="fa fa-btn fa-eye"></i>View</a> 
        <a href="{{ route('employees.edit', $employee->id) }}" class="btn btn-sm btn-primary"><i class="fa fa-btn fa-pencil-square-o"></i>Edit</i></a>
    <button class="btn btn-sm btn-danger" data-href="{{ route('employees.destroy', $employee->id) }}" data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-btn fa-trash-o"></i>Remove</button>
  </td>
</tr>
@endforeach
</tbody>
</table>

我的js：

$('#confirm-delete').on('show.bs.modal', function(e) {
    $(this).find('.btn-ok').attr('href', $(this)(e.relatedTarget).data('href'));
});

提前致谢！

Answer 1

之前我遇到了同样的问题，你正在设置一个带有静态id的模型组件，它将在@foreach中重复，所以你需要为该组件设置一个动态id，尝试像

<button class="btn btn-sm btn-danger" data-href="{{ route('employees.destroy', $employee->id) }}" data-toggle="modal" data-target="#confirm-delete<?= $employee->id ?>"><i class="fa fa-btn fa-trash-o"></i>Remove</button>

因此，当DOM加载时，它将创建许多具有这种不同ID的模态组件对于按钮，你可以把它放在没有JS的地方

@ManagedBean(name="method")
public class Meth {
    public String vamos(){
        return "vamos";
    }
}

Answer 2

此代码：

$(this)(e.relatedTarget)

错了。即使您将其更改为：

$(e.relatedTarget)

无效。

因此，因为您正在寻找单击按钮以显示您的模态，您可以使用：

   $('#confirm-delete').on('show.bs.modal', function (e) {
      if ($(document.activeElement).is('button.btn.btn-sm.btn-danger')) {
            $(this).find('.btn-ok').attr('href', $(document.activeElement).data('href'));
      }
   });

document.activeElement：返回当前关注的元素，即，如果用户键入任何键，则将获取击键事件的元素。该属性是只读的。

换句话说，当您单击按钮时，document.activeElement就是单击的按钮。

我的例子：

$(function () {
  $('#confirm-delete').on('show.bs.modal', function (e) {
    if ($(document.activeElement).is('button.btn.btn-sm.btn-danger')) {
      $(this).find('.btn-ok').attr('href', $(document.activeElement).data('href'));
    }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<table class="table">
    <thead>
    <th>#</th>
    <th>Name</th>
    <th>Email</th>
    <th>Position</th>
    <th></th>
    </thead>

    <tbody>
    <!-- twitter bootstrap delete confrimation -->
    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="deleteModal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteModal">Confirm Remove</h4>
                </div>

                <div class="modal-body">
                    <p>You are about to remove a team member.</p>

                    <p>Do you want to proceed?</p>

                    <p class="debug-url"></p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger btn-ok"><i class="fa fa-btn fa-trash-o"></i>Remove
                    </button>
                </div>
            </div>
        </div>
    </div>
    <tr>
        <th>{{ (($employees->currentPage() - 1 ) * $employees->perPage() ) + $key + 1 }}</th>
        <td>{{ $employee->name }}</td>
        <td>{{ $employee->email }}</td>
        <td>{{ $employee->position->name }}</td>
        <td class="position-btn-in-the-right input-prepend">
            <a href="{{ route('employees.show', $employee->id) }}" class="btn btn-sm btn-default"><i
                    class="fa fa-btn fa-eye"></i>View</a>
            <a href="{{ route('employees.edit', $employee->id) }}" class="btn btn-sm btn-primary"><i
                    class="fa fa-btn fa-pencil-square-o"></i>Edit</i></a>
            <button class="btn btn-sm btn-danger" data-href="{{ route('employees.destroy', $employee->id) }}"
                    data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-btn fa-trash-o"></i>Remove
            </button>
        </td>
    </tr>
    <tr>
        <th>{{ (($employees->currentPage() - 1 ) * $employees->perPage() ) + $key + 1 }}</th>
        <td>{{ $employee->name }}</td>
        <td>{{ $employee->email }}</td>
        <td>{{ $employee->position->name }}</td>
        <td class="position-btn-in-the-right input-prepend">
            <a href="{{ route('employees.show', $employee->id) }}" class="btn btn-sm btn-default"><i
                    class="fa fa-btn fa-eye"></i>View</a>
            <a href="{{ route('employees.edit', $employee->id) }}" class="btn btn-sm btn-primary"><i
                    class="fa fa-btn fa-pencil-square-o"></i>Edit</i></a>
            <button class="btn btn-sm btn-danger" data-href="{{ route('employees.destroy', $employee->id) }}"
                    data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-btn fa-trash-o"></i>Remove
            </button>
        </td>
    </tr>
    </tbody>
</table>

jQuery在foreach循环中删除确认

2 个答案: