Second AJAX function not firing

Question

I have a JQuery AJAX function that gets a list and populates a partial view dropdown based on the users selection of the first drop down.

The first function fires but not the second. The fist piece is the important part. It works for the first call but not the second one. Both are idential except for the name of the list and partial view. And its not firing for any reason. Ideas?

Script

$(document).ready(function () {

    $('#SelectedCompanyID').change(function () {
        // when the selection of some other drop down changes 
        // get the new value
        var value = $(this).val();

        // and send it as AJAX request to the newly created action
        $.ajax({
            url: '@Url.Action("DivisionDDL")',
            type: 'POST',
            data: { companyID: value },
            success: function (result) {
                // when the AJAX succeeds refresh the ddl container with
                // the partial HTML returned by the Foo controller action
                $('#divisionDDLContainer').html(result);
            }
        });
    });

    $('#SelectedDivisionID').change(function () {
        // when the selection of some other drop down changes 
        // get the new value
        var value = $(this).val();

        // and send it as AJAX request to the newly created action
        $.ajax({
            url: '@Url.Action("OrgUnitDDL")',
            type: 'POST',
            data: { divisionID: value },
            success: function (result) {
                // when the AJAX succeeds refresh the ddl container with
                // the partial HTML returned by the Foo controller action
                $('#orgUnitDDLContainer').html(result);
            }
        });
    });
});

Some HTML

<tr>
                    <td><label>Company</label></td>
                    <td colspan="4">
                        @Html.DropDownListFor(m => m.SelectedCompanyID, Model.ListCompany)
                    </td>
                </tr>
                <tr>
                    <td><label>Division</label></td>
                    <td colspan="4">
                        <div id="divisionDDLContainer">
                            @Html.Partial("DivisionDDL", Model)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><label>Org. Unit</label></td>
                    <td colspan="4">
                        <div id="orgUnitDDLContainer">
                            @Html.Partial("OrgUnitDDL", Model)
                        </div>
                    </td>
                </tr>

One of the partial views

@model Quest.Models.ViewModelJobDetails
@Html.DropDownListFor(m => m.SelectedDivisionID, Model.ListDivision)

Answer 1

Set id for SelectedDivisionID as

@Html.DropDownListFor(m => m.SelectedDivisionID, Model.ListDivision,new {id="SelectedDivisionID"})

also use

    $.ajax({
                cache:false,//set cache false
                type: "POST",
                url: '@Url.Action()',
    contentType: "application/json; charset=utf-8",//type of data posting to server
                data: dataToPost,
                dataType:"json",// type of data posted from server 
                success: function (data) {

                }
            });

Answer 2

You set your code to bind to the #SelectedDivisionID, this binding is then destroyed when you replace the content of your divisionDDLContainer div with the AJAX result:

$('#divisionDDLContainer').html(result);

So what you need to do is change the way your event binding is being done.

$('#divisionDDLContainer').on('change', '#SelectedDivisionId', function () {
   // when the selection of some other drop down changes 
    // get the new value
    var value = $(this).val();

    // and send it as AJAX request to the newly created action
    $.ajax({
        url: '@Url.Action("OrgUnitDDL")',
        type: 'POST',
        data: { divisionID: value },
        success: function (result) {
            // when the AJAX succeeds refresh the ddl container with
            // the partial HTML returned by the Foo controller action
            $('#orgUnitDDLContainer').html(result);
        }
    });     

});

Should give you what you are looking for. This will ensure your events are rebound when new elements are added.

Some further reading if you choose:

Event binding on dynamically created elements?

https://api.jquery.com/on/