javascript - 防止 Hidden Bootstrap 4 Modals 对事件做出反应

问题描述

我正在尝试在删除表中的行时创建“确认模式”。当用户想要删除一行时，会显示一个模式（单击按钮），用户必须在其中输入用户名作为确认删除它并单击删除按钮。这个表有多行（每个用户一个），每一行都有自己的“删除按钮”，用这个循环创建：

while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
            ?>
            <tr>
                <th scope="row"><?=$row["ID"]?></th>
                <td><?=$row["username"]?></td>
                <td><?=$row["mail"]?></td>
                <td><button class="btn btn-sm btn-primary"><i class="fas fa-pencil-alt"></i></button></td>
                <td><button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#delete-user-modal" data-bs-user-id="<?=$row["ID"]?>" data-bs-username="<?=$row["username"]?>"><i class="fas fa-trash"></i></button></td>
            </tr>
    <?php
        }

这就是我设置模态的方式：

<!--DELETE USER MODAL-->
<div class="modal modal-dialog modal-dialog-centered fade" id="delete-user-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p></p>
                <input type="text" name="username" class="form-control" id="username-input">
                <input hidden type="text" name="user_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" id="modal-delete-button" class="btn btn-danger disabled" >Elimina</button>
            </div>
        </div>
    </div>
</div>

通过data-bs我传递每个按钮的 ID 和用户名，并将这些数据放入 Modal 中：

        $("#delete-user-modal").on('show.bs.modal', function (event) {
        // Button that triggered the modal
        var button = event.relatedTarget
        // Extract info from data-bs-* attributes
        var userId = button.getAttribute('data-bs-user-id')
        var username = button.getAttribute('data-bs-username')

        // Update the modal's content.
        var modalTitle = $(this).find('.modal-title')
        var modalP = $(this).find('.modal-body > p')
        var modalInput = $(this).find('.modal-body > input')
        var modalDeleteBtn = $(this).find('#modal-delete-button')

        modalTitle.append('Vuoi eliminare <span class="bold">' + username + '</span>?')
        modalP.append('Scrivi <span class="bold">' + username + '</span> per confermare')
        $("#delete-user-modal").on('keyup', event => {
            console.log(modalInput.val())

            if(modalInput.val() === username){
                console.log("check")
                //modalDeleteBtn.classList.remove('disable')
            }
        })
    })

问题是，当我关闭一个模式并打开一个新模式（即：单击另一行的按钮）时，隐藏的模式也会对on('keyup')事件做出反应。

每次单击新按钮或重置关闭的模态并使新模态完全新鲜时，我都需要一种方法来打开新的模态。

标签： javascriptjquerybootstrap-4bootstrap-modal

javascript - 防止 Hidden Bootstrap 4 Modals 对事件做出反应

问题描述

解决方案

推荐阅读