动态生成的项目上的绑定按钮事件中断了父事件

Question

我更改了一些JavaScript，以在模态工作中制作一个按钮（如此处建议）；但是，现在父表上的按钮事件根本不起作用。

我无法单击它们并获取其模态进行填充。我相信这很简单，但是我完全想念它，我会怪无知。

仅Javascript文件：

$(function () {
    var placeholderElement = $('#modal-placeholder');

    $(document).on('click', '[data-toggle="ajax-modal"]', function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            placeholderElement.html(data);
            placeholderElement.find('.modal').modal('show');
        });
    });
});

$(function () {
    $(document).on('click', '[data-dismiss="modal"]', function () { 
        $(".modal-backdrop").remove();
    });
});

$('.sqButton').click( function (event) {  
    event.stopPropagation();
});

父表：

<div class="tableContainer">

    <div class="maintHeader">
        <div class="headerText">
            All Users

            <button class="sqButton btnGreen float-right" title="Register" data-toggle="ajax-modal" data-target="#register" data-url="@Url.Action("Register", "Home")"><i class="glyphicon glyphicon-plus"></i></button>
        </div>
    </div>

    @if (Model.Any())
    {
        //--Table Header Declaration--
        <div class="wrapper">
            <div class="scrollTable">

                <table class="table table-hover table-md ">

                    <thead>
                        <tr>
                            <th class="text-left tableHead d-none">Id</th>
                            <th class="text-left tableHead">User Name</th>
                            <th class="text-left tableHead">Email</th>
                            <th class="text-left tableHead">Phone Number</th>
                            <th class="text-left tableHead">City</th>
                            <th class="text-left tableHead text-right">Remove</th>
                        </tr>
                    </thead>

                    @*--Table Body For Each to pull DB records--*@
                    <tbody>
                        @foreach (var user in Model)
                        {
                            @Html.Partial("~/Views/Administration/Users/UserTable.cshtml", user)
                        }
                    </tbody>

                </table>
            </div>
        </div>
    }
    <div id="modal-placeholder"></div>
</div>

父表（@ HTML.Partial）：

<tr data-toggle="ajax-modal" data-target="#editUser" data-url="@Url.Action("EditUser", new {Id = Model.Id})" asp-action="EditUser" asp-controller="Administration" asp-route-id="@Model.Id">
    <td class="text-left d-none">@Model.Id</td>
    <td class="text-left">@Model.UserName</td>
    <td class="text-left">@Model.Email</td>
    <td class="text-left">@Model.PhoneNumber</td>
    <td class="text-left">@Model.City</td>
    <td>
        <button class="sqButton btnRed float-right" title="Delete" data-toggle="ajax-modal" data-target="#deleteUser" data-url="@Url.Action("Delete", "Administration", new {Id = Model.Id , Type = "user"})">
            <i class="glyphicon glyphicon-remove"></i>
        </button>
    </td>
</tr>

<div id="modal-placeholder"></div>

模式：

<div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modalPosition" role="document">
        <div class="modal-content">
            <div class="modal-header headerFormat">
                <span class="modal-title TitleFont">Edit User</span>
                <button type="button" class="close closePadding" id="closeModal" data-dismiss="modal" aria-label="Close">
                    <span class="xColor" aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">              
                    @*----------------------Edit User Role Tab----------------------*@
                    <div class="tab-pane fade" id="roles" role="tabpanel" aria-labelledby="roles-tab">
                        <div class="wrapper">
                            <table class="table table-hover table-md ">

                                <thead>
                                    <tr>
                                        <td class="text-left tableHead">RoleId</td>
                                        <td class="text-left tableHead">Role</td>
                                        <td class="text-right tableHead">Delete</td>

                                    </tr>
                                </thead>

                                @*--Table Body For Each to pull DB records--*@
                                <tbody>
                                    @foreach (var role in Model.Roles)
                                    {
                                        <tr>
                                            @*@<td>@Model.Roles.FirstOrDefault(x=> x.RoleId == role.RoleId)</td>*@
                                            <td>@role.RoleID</td>
                                            <td>@role.RoleName</td>
                                            <td>
                                                <button class="sqButton btnRed float-right zIndex" id="Delete" title="Delete" data-toggle="ajax-modal" data-target="#deleteRoleUser" data-url="@Url.Action("Delete", "Administration", new {Id = Model.Id , Type = "roleUser", roleid = role.RoleID})">
                                                    <i class="glyphicon glyphicon-remove"></i>
                                                </button>
                                            </td>

                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                        <a asp-action="UserMaint" class="btn btn-primary padFloat blue">Cancel</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-placeholder"></div>
</div>

我只是试图让所有按钮正确显示模式。

如果我将JS更改为：

   $(function () {
    var placeholderElement = $('#modal-placeholder');

    $('[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            placeholderElement.html(data);
            placeholderElement.find('.modal').modal('show');
        });
    });
});

它会破坏模式中的按钮。如果将其切换到开始时粘贴的内容，则会破坏父表。

Answer 1

这里是这段代码

$('.sqButton').click( function (event) {  
    event.stopPropagation();
});

您正在阻止click事件冒泡至父元素。

请参见MDN link here