将对象的数据 ID 传递到引导模态表单

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 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() 方法查找按钮并从中获取数据 id，这些数据 id 将通过ajax传递

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

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

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

实时工作演示：(在控制台中显示数据 id.log然后单击按钮工作)

$("#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>