Change function not being hit on page reload

I have a cshtml view which, in the head, declares an js doc and in the body loads a partial

    <script src="~/js/Project/doc.js"></script>

and the partial

<div class="panel" id="panelDoc">
    <partial name="_docInformation" model=Model.Doc />

This partial loads up a partial view which has various tables and a dropdown. The doc.js has the following function which simply gets the information on the page again in correspondence to the document type the user has selected, replacing the html in panelDoc to the partial with the new information:

$(document).ready(function () {

    $('#docType').change(function () {
        // Get the selected document type from the dropdown via ID
        var docType = $('#docType option:selected').val();

        var form = {
            ProjectID: $('#ProjectID').val(),
            DocType: docType

            url:  '/Project/LoadDocumentPartial',
            type: 'POST',
            data: form,
            success: function (result) {
                if (result.success != undefined && !result.success) {
                    // Show error stuff
                else {
                    // Replace the current html in id with new html

This works the first time the partial is loaded as I can change the dropdown and it hits this function, replacing the contents with the new information. However, if I then change the dropdown again, it never hits this function.

From my understanding, we include the js file in the parent view and this should be hit every time the dropdown changes? Or is there something I’m missing here?


Try to use different syntax for a top of javascript function:

 $(document).on("change", "#docType", (function (e) {



Leave a Reply

Your email address will not be published. Required fields are marked *