asp.net javascript mvc - как я могу получить javascript с внутренней страницы для очистки элемента с внешней страницы?

Question

Я хочу, чтобы событие щелчка javascript, вызываемое из "внутренней" формы mvc, очищало элемент от "внешней" / "родительской" формы, но нажатие кнопки очистки не приводит к результатам (см. Каркас). Javascript работает во внешней форме, но не при вызове из ссылки на файл сценариев во внутренней форме, хотя я знаю, что сценарий подключен правильно, b / c происходит другое поведение из сценария .:

$("#clearField").on('click', function ()
{
    document.getElementById("playerCardNumber").value = "";
});

Среда: asp.net mvc

Код для внешней / родительской cshtml страницы:

@model adminLte.Models.playerCardData

<section class="content">

            <div class="inputPlayerInfo">
                @using (Ajax.BeginForm("WriteToGroup", "IT", new AjaxOptions  //action, view
                {
                    HttpMethod = "GET",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "innerPlayerInfoForm", //css tag (see below)
                    OnComplete = "ReturnData",
                    OnBegin = "ClearResults",
                    LoadingElementId = "divloading"
                }))
                {
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="divTable playerGroupTbl">
                            <div class="divTableBody">
                                <div class="divTableRow">
                                    @Html.LabelFor(model => model.playerCardNumber , htmlAttributes: new { @class = "divTableCell" })
                                    <div class="divTableCell">
                                        @Html.EditorFor(model => model.playerCardNumber, new { htmlAttributes = new { @id= "playerCardNumber", @type ="password", @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.playerCardNumber , "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <input type="submit" name="Command" value="Lookup Player" class="btn btn-default btn-lg" />
                        <button type="button" class="btn btn-default btn-lg" id="clearField" >Clear Previous Swipe</button>
                }
           </div>
           <br />

            @*form is inserted here*@
            <div id="divloading" style="display:none">
                <img src="~/images/giphy.gif" /> </div>
            <div id="innerPlayerInfoForm"></div>

</section>

@section scripts{
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script>
            function ReturnData()
        {
                $('#innerPlayerInfoForm').show();
            }
            function ClearResults()
            {
                $('#innerPlayerInfoForm').empty();
            }
            $('#playerEvent').selectpicker({
                size: 4
            });
            $("#clearField").on('click', function () {
                document.getElementById("playerCardNumber").value = "";
            });
        </script>
}

Код для частичного просмотра:

@model adminLte.Models.eventModelParent

<div class="inputPlayerInfo">
    @using (Ajax.BeginForm("sproc_PlayerGroupInsert", "IT", new AjaxOptions  //action, view
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "innerPlayerInfoForm", //css tag (see below)
        OnComplete = "ReturnData",
        OnBegin = "ClearResults"
    }))
    {
        @Html.AntiForgeryToken()
        HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

        <div class="divTable playerGroupTbl">
            <div class="divTableBody">
                <div class="divTableRow">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                    <div class="divTableCell">
                        Event:
                    </div>
                        <div class="divTableCell">

                            @foreach (var _event in Model.vips)
                            {

                                @Html.RadioButtonFor(m => m.events.SelectedEvent, _event.eventId,
                                                        _event.eventchecked == 1 ? new { @checked = "checked" } : null
                               )  @:&nbsp  @_event.eventName
                                <br />
                            }

                            @Html.ValidationMessageFor(model => model.events.SelectedEvent , "", new { @class = "text-danger" })
                        </div>
                    </div>
                <div class="divTableRow" >
                    <div class="divTableCell"> Player ID: </div>
                    @foreach (var item in Model.playerData)
                    {
                        <div class="divTableCell">
                        <input style="border:none;background:transparent;"  id="PlayerID" name="PlayerID" value=@item.PlayerID readonly>
                         </div>
                    }
                </div>
                <div class="divTableRow someDivXYZ">
                    <div class="divTableCell"> Player First Name: </div>
                    @foreach (var item in Model.playerData)
                        {
                            <div class="divTableCell">
                            <input style="border:none;background:transparent;"  id="playerFirstName" name="playerFirstName" value=@item.playerFirstName readonly>
                            </div>
                    }
                </div>
                <div class="divTableRow someDivXYZ">
                    <div class="divTableCell"> Player Last Name: </div>
                    @foreach (var item in Model.playerData)
                    {
                        <div class="divTableCell">
                            <input style="border:none;background:transparent;"  id="playerLastName" name="playerLastName" value=@item.playerLastName readonly>
                        </div>
                    }
                </div>
                </div>
                </div>
                <br />
                        <input type="submit" id="updatePlayerGroup" value="Write This Player to Group" class="btn btn-default btn-lg" />
                        <button onclick="ClearResults()" class="btn btn-default btn-lg" id="clearField">Clear Selected Data</button>
                }
            </div>

            <div id="PlayerGroupInsertStatus"></div>
            @Scripts.Render("~/scripts/renderJS.js")

Внешний JS-файл:

$('#playerEvent').selectpicker({
    size: 4
});


$('#formEvent_playerEvent').selectpicker({
    size: 4
});

function ReturnData() {
    $('#PlayerGroupInsertStatus').show();
}

function beforeSend() {

    var PlayerID = document.getElementById("PlayerID").value;

}

$("#clearField").on('click', function ()
{
    document.getElementById("playerCardNumber") = "";
});

Любая помощь очень ценится - заранее спасибо!