При нажатии функция срабатывает больше раз при каждом нажатии кнопки

Question

У меня была начальная проблема, когда я не мог заставить работать кнопку в модале. Я получил свое решение;однако, это закончило тем, что сломало события кнопки основного экрана. Я подумал, что разделение скриптов на разные файлы и включение файла для использования определенных js-файлов на определенных страницах cshmtl решит мою проблему;однако, это вызывает у меня больше горя. У меня были все эти сценарии в одном файле, если есть решение, в котором все мои кнопки работают внутри и за пределами модальной зоны, я буду счастлив пойти по этому пути. - но теперь, когда я нажимаю кнопку «добавить пользователя», это нормально. Если я нажму на него дважды, появятся два модальных окна. Если я щелкну по нему 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");) событие перед каждым событием, но это ничего не исправило.

Я уверен, что есть простой способ сделать это. Я только что танцевал вокруг этого и делал его более сложным, чем должно быть.