Question

我最初遇到一个问题，就是我无法在工作模式中找到按钮。我得到了解决方案；但是，它最终破坏了主屏幕表的按钮事件。我想将脚本分成不同的文件，并包括在某些cshmtl页面上使用特定js文件的文件可以解决我的问题；但是，这让我更加悲伤。我将所有这些脚本保存在一个文件中，如果有一种解决方案，使我所有的按钮都可以在模式内部和外部使用，那么我将很乐意采用这种方法。

我想我大概已经知道了-但是现在当我单击“添加用户”按钮时，一切正常。如果我单击两次，将弹出两个模态。如果我单击它3次，它会吓跑。我不确定该怎么办。我不是最精通js / jQuery的人，还是新手和学习者。

主页：

<link rel="stylesheet" href="~/css/Maintenance.css" />
<link rel="stylesheet" href="~/css/Index.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="~/js/Maintenance.js"></script>


<div class="tableContainer">

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

@*This button is the one causing issues -----------------------------------*@

            <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：

<link rel="stylesheet" href="~/css/Modals.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="~/js/MaintModals.js"></script>

<div class="modal fade" id="login" 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">Login</span>
                <button type="button" class="close closePadding" data-dismiss="modal" aria-label="Close">
                    <span class="xColor" aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" class="mt-3" asp-controller="Account" asp-action="Login">
                    <div class="form-group row text-center">
                        <label class="col-sm-3 text-right col-form-label labelFont" asp-for="Email"></label>
                        <div class="col-sm-7">
                            <input asp-for="Email" class="formField" />
                            <span asp-validation-for="Email" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group row text-center">
                        <label class="col-sm-3 text-right col-form-label labelFont" asp-for="Password"></label>
                        <div class="col-sm-7">
                            <input asp-for="Password" class="formField" />
                            <span asp-validation-for="Password" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group row text-center">
                        <label asp-for="RememberMe" class="col-sm-4 text-right col-form-label labelFont" />
                        <div class="col-sm-12">
                            <input asp-for="RememberMe" />
                            @Html.DisplayNameFor(m => m.RememberMe)
                        </div>
                    </div>


                    <div asp-validation-summary="All" class="text-danger"></div>

                    <button type="submit" class="btn btn-primary padFloat green">Login</button>
                    <button type="button" class="btn btn-secondary padFloat blue" data-dismiss="modal">Close</button>
                </form>
            </div>
        </div>
    </div>
</div>

Maintenance.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');
        });
    });
});

MaintModal.js：

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

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

site.js：

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

我只希望父表的按钮可以工作，而模式中的按钮可以工作。我试图在每个事件之前取消绑定（$('[data-toggle="ajax-modal"]').unbind("click");）事件，但是没有解决任何问题。

我敢肯定有一种简单的方法可以做到。我一直在绕着它跳舞，使它变得比应有的复杂。

每次点击按钮时，点击功能会触发更多次

0 个答案: