区分 Bootstrap Modal 中的按钮

Question

I'm using bootstrap to make a quick throw-together website for a little project I'm working on.

I'm using a Modal for users to confirm an action and I'm not sure how to tell the difference between the buttons being pressed within the modal. There is a delete button and a cancel button.

Code:

$('.deleteButton').click((event) => {

                $('#confirmDeleteSingleInfractionModal').modal('toggle');

                let data = {
                    infractionID: $(event.target).attr('referencedInfraction'),
                    targetUserID: $(event.target).attr('targetUserID')
                }


                console.log(data);


                $('#confirmDeleteSingleInfractionModal').on('hide.bs.modal', function (close) {

                    
                    if ($(close.relatedTarget).hasClass('cancelButton'))
                        return;



                    console.log('deleting');

                    $.ajax({
                        type: 'delete',
                        url: `${window.location.origin}/dataLink/infraction`,
                        data,
                        success: () => {

                        },
                        error: () => {
                            showInfractionDeleteError();
                        }
                    })

                })
            });

I gave all the cancel buttons a cancelButton class so I could use jQuery to check if it was a cancel button.

However, I've come to notice that it still doesn't return even if it has the class (the button code is below)

<div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                    </svg> Delete </button>
                <button type="button" class="cancelButton btn btn-primary" data-dismiss="modal">Cancel</button>
            </div>

If anybody has any suggestions as to how I could make it return when the button pressed has the cancelButton class or any other way to do what I'm trying to do, that would be very appreciated.

Thanks in advance.

Answer 1

On hide.bs.modal , the event provided in function (close) { is not the same as the one in $('.deleteButton').click((event) => { .

In your code, every time the .deleteButton is clicked, the modal display is toggled... And a new hide.bs.modal event listener is registered (not executed right away)... But milliseconds after, the modal toggling fires the hide.bs.modal ... Making you think it is directly related to the .deleteButton click... Which is wrong.

That can be confusing, I agree.

Just assume that registering an event handler inside another event handler is wrong 99% of the time.

What is inside the hide.bs.modal event handler execute every time the modal closes. Whatever the close reason. If you console.log close.relatedTarget ... You would notice it isn't a reference to the .deleteButton button. It probably is squarely undefined (I did not check).

So here is my suggestion:

$('.deleteButton').click((event) => {
    
    // Something to do when a .deleteButton is clicked
    
    $('#confirmDeleteSingleInfractionModal').modal('toggle');

    let data = {
        infractionID: $(event.target).attr('referencedInfraction'),
        targetUserID: $(event.target).attr('targetUserID')
    }

    console.log(data);
    console.log('deleting');

    $.ajax({
        type: 'delete',
        url: `${window.location.origin}/dataLink/infraction`,
        data,
        success: () => {

        },
        error: () => {
            showInfractionDeleteError();
        }
    })
});

$('.cancelButton').click((event) => {

  // Something to do when a .cancelButton is clicked
  // ...
})

$('#confirmDeleteSingleInfractionModal').on('hide.bs.modal', function (close) {

  // Something else to do on modal close (Whatever the close reason)
  // ...
})

Answer 2

the

$('#confirmDeleteSingleInfractionModal').on('hide.bs.modal', function (close) {...}

is nested inside the

$('.deleteButton').click((event) {...}

so i would take it out of there.

Second, provide two different event handlers for the two different buttons (cancel and delete) and handle the action you wish in each event handler. In order to tell the difference between the buttons being pressed within the modal you can provide two different classes for each button. let's apply "cancel-button" class for the cancel button and "delete-button" for the delete button.

$('.cancel-button').click((event) => {
     // cancel action
})

$('.delete-button').click((event) => {
     // delete action
})