有没有办法使用单个 BS 模态和单个 JS 代码进行多次删除/确认操作？

Posted 2023-02-24

【中文标题】有没有办法使用单个 BS 模态和单个 JS 代码进行多次删除/确认操作？

【英文标题】：Is there any way to use single BS Modal and a single JS code for Multiple Delete/ Confirm Operation?

【发布时间】：2021-11-04 15:36:37

【问题描述】：

我正在做一个 php 项目，在这个项目中，有多个删除操作，如“删除厨师”、“删除客户”、“删除餐厅”、“删除反馈”。 为此，我使用了 18 个模态和 18 个 JS 代码。 我想知道有什么方法可以对所有这些操作使用单个模态和单个 JS 代码吗？ 我的代码是：

1) 删除按钮：

<a rel="<?php echo $chef_id; ?>" data-page=<?php echo $page; ?> 
href="javascript:void(0)" data-bs-toggle="tooltip" data-bs- 
placement="top" title="Delete" class="dropdown-item small1 text-danger 
del_appr_chef_link"><i class="fa fa-trash fa-sm"></i> Delete</a>

2) BS 模态：

<div class="modal bounceIn" id="del_appr_chef" data-bs-backdrop="static" 
data-bs-keyboard="false" tabindex="-1" aria- 
labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <h4 class="modal-header modal-title bg-dark text-white py-2">Delete Chef ?
        </h4>
        <div class="modal-body text-dark">
            <h5>You Want to Delete Chef ?</h5>
        </div>
        <div class="modal-footer justify-content-center py-1">
            <a href="" class="btn btn-outline-danger btn-sm del_appr_chef">Delete</a>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-bs- 
         dismiss="modal">Close</button>
        </div>
    </div>
</div>

3) JavaScript 代码：

$(document).ready(function() 
    $(".del_appr_chef_link").on('click', function() 
        var id = $(this).attr("rel");
        var page = $(this).data("page");
        var del_url = "all_chefs.php?del=" + id + "&page=" + page + " ";
        $(".del_appr_chef").attr("href", del_url);
        $("#del_appr_chef").modal('show');
    );
);

【参考方案1】：

改为绑定到文档。

$(document).ready(function() 
    $(document).on('click', ".del_appr_chef_link", function(el) 
        let that = el.target;
        var id = $(that).attr("rel");
        var page = $(that).data("page");
        var del_url = "all_chefs.php?del=" + id + "&page=" + page + " ";
        $(".del_appr_chef").attr("href", del_url);
        $("#del_appr_chef").modal('show');
    );
);