Modal won't close and prevent default on no click, and won't execute func on yes click

Question

I have a modal with two buttons. One is a yes button and one is a no button. If yes button is pressed, I would like the remainder of the function to execute. If no btn clicked, I would like the page to prevent default and not execute. However, it seems that regardless of which button is clicked, nothing happens besides the modal closing. I am using a modal example I found elsewhere, so this may be the issue. After glancing at it for some time I cannot seem to find where the issue is. Am I missing something small? Or perhaps my Jquery is wrong? Below is my code:

Modal:

    <!-- Modal for delete-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border-primary mb-3 box-shadow-none img-responsive">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="card-body bg-light">
                <div id="del" class="center">
                    <label>Are you sure you want to delete?</label>
                </div>
            </div>
            <div class="modal-footer">
                <div id="deleteYes">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="deleteYes">Yes</button>
                </div>
                <div id="deleteNo">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="deleteNo">No</button>
                </div>
            </div>
        </div>
    </div>
</div>

And here is my Jquery:

 $(".btnDeleteTerminalCommand").click(function (e) {

    $("#deleteModal").modal('toggle');

    if ($("#deleteNo").click) {
        return e.preventDefault();
    }

    var rowId = "#" + $(this).data("rowindex");
    var row = $(rowId);
    var termId = row.find(".tdTermId").html().trim();
    var cmdId = row.find(".tdCmdId").html().trim();
    var cmdVal = row.find(".tdCmdVal").html().trim();
    var cmdID = row.find(".cmdID").html().trim();

    var data = {
        TerminalID: termId,
        CommandID: cmdId,
        CommandValue: cmdVal,
        ID: cmdID
    };

    $.ajax({
        url: '@Url.Action("DeleteTerminalCommand", "TerminalCommand")',
        type: "POST",
        data: data,
        success: function (response) {
            console.log("Success");
            window.location.href = response.Url;
        }
    });
});

Any advice helps! Thank you!

Answer 1

Your click handler will toggle the modal and immediately continue to execute the rest of the function before the user can click anything. If your modal has two buttons, create a click handler for each button. Perhaps the No button just closes the modal. The Yes button handler can execute the actions required to accomplish the task.

$(".btnDeleteTerminalCommand").click(function(e){
    $("#deleteModal").modal('toggle');
}

$("#deleteNo").click(function(e){
    $("#deleteModal").modal('hide');
}

$("#deleteYes").click(function(e){
    // build data object
    // ajax post
}