Question

基本上,我需要建立一个可点击的行,可以点击行,然后显示用户细节。然而,当单点冻结 but子在tag子内时,细节模式也随之消失。我不想这样说,因为我只想看到冻结模式,而不是细节模式。提前感谢。

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>

我试图在删除 but子时躲避这一模式,但并非奏效。

Answer 1

因此,我基本上使用了以下法典:

    $(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);
            }
        });
    }
});

我基本上做了一些事情,确保只有在用户点击时,才有具体的模式。然后,我用麻风气呼吁和部分观点来表达看法。

友情链接