jQuery function doesn't get called / loaded

I give up! I have an ASP.NET MVC application and for some reason my jQuery function doesn't get called when I click on the dropdown control. I am supposedly loading the function at the bottom of my page by including the script file. My hunch is that it's not getting loaded. I have another program very similar and it the code works fine.

Editor.cshtml

@model MyProgram.Models.WebPages

@{
    ViewBag.Title = "Editor";
}

<script src="~/ckeditor/ckeditor.js"></script>
<script src="~/ckeditor/adapters/jquery.js"></script>

<div class="container-fluid">
    <div class="cl-mcont">
        <div class="row dash-cols">
            <div class="col-md-12">
                <div class="block-flat">
                    <div class="content">
                        @using (Html.BeginForm("SubmitForm", "Edit", FormMethod.Post))
                        {
                            <div class="btn-group">
                                <a class="btn btn-primary dropdown-toggle" id="DropID" href="#" data-toggle="dropdown">Select a Page<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">HOME PAGE</a></li>
                                    <li><a href="#">BEER PAGE</a></li>
                                    <li><a href="#">SPIRITS PAGE</a></li>
                                    <li><a href="#">WINE PAGE</a></li>
                                </ul>
                            </div>

                            @Html.TextAreaFor(model => model.WebPageText, new { @id = "editor1" })

                            <input type="submit" value="Save" />
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    CKEDITOR.replace('editor1',
        {
            // removePlugins: 'toolbar,elementspath',
            allowedContent: true,
            resize_enabled: true,
            // readOnly: true
            height: '1000px'
        });
</script>

<script src="~/Scripts/Custom/Editor.js"></script>

Editor.js

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');

    $.ajax({
        url: '/Edit/DropdownChanged',
        type: 'POST',
        contentType: 'application/json;',
        data: JSON.stringify({ id: selText }),
        success: function (sText) {
            //alert("Updated Text=" + sText);
            var ckEditor = CKEDITOR.instances.editor1;
            ckEditor.setData(sText);
            ckEditor.updateElement();
            //success: function (sText) {
            //if (valid) {
            //  //show that id is valid
            //  alert("true");
            //} else {
            //  //show that id is not valid
            //  alert("false");
            //}
        }
    });
});

Many Thanks Peter

Solution

I figured it out!  I just had to move one statement, @RenderSection("scripts", required: false) to the bottom in the _Layout.cshtml file

 - <!-- Scripts -->
          <!-- Bootstrap core JavaScript
          ================================================== -->
          <!-- Placed at the end of the document so the pages load faster --> 

<!--  IT WAS ORIGINALLY HERE: @RenderSection("scripts", required: false) -->

          <script src="http://code.jquery.com/jquery-latest.js"></script>
          <script src="~/Scripts/bootstrap.min.js"></script>
          <script src="~/Scripts/Template/theme.js"></script>

          <script src="https://maps.googleapis.com/maps/api/js"></script>

          <script type="text/javascript" src="~/Scripts/Template/index-slider.js"></script>
          <script type="text/javascript" src="~/Scripts/Template/flexslider.js"></script>

<!-- NOW ITS AT THE BOTTOM -->
@RenderSection("scripts", required: false)