Prevent modal from popping up when freeze button is clicked

Question

Basically, I need to create a clickable row where i can click the row and then the user details can be shown. However, when i click freeze button, which is inside the row within a tag, the detail modal pops up also. I don't want that as I only want the freeze modal to pop up but not the detail modal. Thanks in advance.

Html code:

<tr data-toggle="modal" data-id="1" data-target="#detailModal" class="row-click">
                <td>
                    <span class="custom-checkbox">
                        <input type="checkbox" id="checkbox@(i)" name="options[]" value=@i>
                        <label for="checkbox@(i)"></label>
                    </span>
                </td>
                <td>@Model.UsersList[i].Username</td>
                <td>@Model.UsersList[i].Email</td>
                <td>@Model.UsersList[i].FirstName</td>
                <td>@Model.UsersList[i].LastName</td>
                @{
                    if (!Model.UsersList[i].IsDeleted)
                    {
                        <td style="color: #008000; font-weight: bold;">Active</td>
                    }
                    else
                    {
                        <td style="color: #FF0000; font-weight: bold;">Deleted</td>
                    }

                }
                <td class="actions-td">
                    <div class="dropdown">
                        <button type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons" data-toggle="tooltip" title="More">&#xe5d4;</i>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item delete" href="#" data-target="#deleteUserModal" data-toggle="modal" data-userId="@Model.UsersList[i].UserId" data-username="@Model.UsersList[i].Username">Freeze</a>
                            <a class="dropdown-item" href="@Url.Action("CreateOrUpdateUser", "User", new { id = Model.UsersList[i].UserId })" >Edit</a>
                            <a class="dropdown-item" href="@Url.Action("CreateOrUpdateLicense", "FHUserLicenseProfile")">Add License</a>
                        </div>
                    </div>
                </td>
</tr>

Jquery code:

<script>
    $(document).ready(function () {
        
        $(".delete").click(function () {
            var userId = $(this).data('userId');
            var userName = $(this).data('username');
            $("#userDataDelete").text("Username: " + userName);
            $("#userIdDelete").val(userId);
            $("#usernameDelete").val(userName);
        });
    });

    $(function () {
    $('#detailModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false,
    }).on('show', function () {
        var getIdFromRow = $(event.target).closest('tr').data('id');
    });
});
</script>

I try hiding the modal when delete button is clicked but it does not work

Answer 1

So basically, I have used the following code:

    $(document).on('click', '#tableData', function (event) {
    var target = event.target;
    if (target.tagName === 'A' || target.tagName === 'I') {
    }
    else if (target.tagName === 'TH') {
    }
    else {
        var row = target.closest('tr');

        var userId = row.getAttribute('data-user-id');

        $.ajax({
            url: '/User/GetUserData',
            type: 'POST',
            data: {
                userId: userId
            },
            success: function (data) {
                $('#userDetails').html(data);
                $('#detailModal').modal('show');
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
            }
        });
    }
});

I basically did something that ensure that only when the user click on the row, then only the specific modal is pop up. Then, I use an ajax call and partial view to populate and render the view.