将对象的 Data-id 传递给 Bootstrap 模态表单

Question

美好的一天。

我有一个任务列表，在任务字段中有一个删除按钮，用于管理任务。
我正在寻找如何将包含 ID 的任务参数（在按下删除按钮后）传递给引导模式。

---

我的目标是单击任务上的“垃圾箱”图标并显示模态，并且仅在模态中确认删除。

这是包裹在模态中的按钮

`<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
              <a data-toggle="modal" data-target="#deleteTaskModal">
                <button class="deleteTask far fa-trash-alt" data-id='{id}'></button>
              </a></span>`

这是模态本身。

我想使用模态确认删除任务。

<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form class="" action="" method="">
          <div class="modal-header">
          </div>
          <div class="modal-body">
            <h3>Do you want to delete this task?</h3>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Delete Task</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  </div>

这里是 Jquery 脚本

我试图捕获“触发器”的 ID 并将其传递给 Modal

$(".modal fade #deleteTaskModal").on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget) //Button that triggered the modal
    var id = button.data('id');
    var url = '/delete/' + id;
    if (confirm('Delete task')) {
      $.ajax({
        url: url,
        type: "DELETE",
        success: function(result) {
          console.log("Deleting task...");
          window.location.href = '/';
        },
        error: function(err) {
          console.log(err);
        }
      })
    }
  }

Answer 1

尽管您在打开的模式中不是 targeting 正确的 element，但您已经快到了。

由于您有一个 a 元素，并且 button 在包含 data-id 的 a 内

您需要注意eventTarget，然后使用.find() 方法找到按钮并从中获取将通过ajax 传递的数据ID

var id = button.find('button').data('id') //need to find the button and get id

此外，您还需要一个事件处理程序，它将在您的模态open 中运行click 函数，当您单击模态中的删除任务按钮时触发。

最后，我还添加了一个模态 close 选项，这将导致 ajax 成功 - 我已经修复了您的 code 并且正在按预期工作。

现场工作演示：（在 console.log 中显示 data-id 并点击按钮工作）

$("#deleteTaskModal").on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) //Button that triggered the modal
  var id = button.find('button').data('id') //need to find the button and get id
  var url = '/delete/' + id; //url

  console.log('data-id= ' + id) //15

  //Click delete task in modal
  $(document).on('click', '.delete_task', function() {
    if (confirm('Delete task')) {
      $.ajax({
        url: url,
        type: "DELETE",
        success: function(result) {
          $('#deleteTaskModal').modal('hide') //hide modal on success
          console.log("Deleting task...");
          window.location.href = '/';
        },
        error: function(err) {
          console.log(err);
        }
      })
    }
  })
})

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
    <a data-toggle="modal" data-target="#deleteTaskModal">
        <button class="deleteTask fas fa-trash-alt" data-id='15'></button>
    </a>
</span>

<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form class="" action="" method="">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <h3>Do you want to delete this task?</h3>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary delete_task">Delete Task</button>
        </div>
      </form>
    </div>
  </div>
</div>
</div>