javascript - Chrome と Firefox ではデータが更新されるが、Internet Explorer 7、8、9 では更新されない

Question

これがノックアウトの問題なのか、JSON の問題なのか、それとも他の問題なのかはわかりませんので、すべて説明します。

多数のユーザーを表示する Web グリッドがあります。これらのメンバーは、AJAX ポップアップ ウィンドウを使用して編集できます。このウィンドウの一部として、特定のユーザーに役割を割り当てることができます。次の図に示すように:

これらのロールはドロップダウン メニューから選択されます。ユーザーに複数のロールを適用する場合は、ドロップダウンを追加できます。これは、ノックアウトの foreach バインディングを使用して行います。

保存をクリックすると、すべてのブラウザーで webgrid 列が自動的に更新されます。ただし、ユーザーを編集して追加の役割を与えた場合、[保存] をクリックしてからもう一度編集してみて、新しく追加した役割が IE に表示されません。ただし、Chrome と Firefox は完全に機能します。

このポップアップ ウィンドウの [保存] ボタンをクリックすると、次のコードを使用してデータが JSON としてサーバーに送信されます。

 $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: '/Person/Save',
                    dataType: 'html',
                    data: JSON.stringify(jsonObj),
                    contentType: 'application/json; charset=utf-8',
                    success: function(data) {
                        dlg.dialog("close");
                        $('#myUserGrid').html(data);
                    },
                    error: function(data) {
                        console.debug(data);
                    }
                }); 

ポップアップ ウィンドウ ビューからの関連する html およびノックアウト コードは次のとおりです。

<tr>
        <td class="roleList" colspan="2">
            <table data-bind="foreach: RoleDdList">
                <tr>
                    <td class="label">
                        * Role:
                    </td>
                    <td>
                        <select data-bind="options: $root.Roles, value: $data.role, optionsValue:'Id', optionsText:'Name'"> <!--,optionsCaption: 'No Role' -->
                        </select>
                    </td>
                    </tr>
                <tr>
                    <td></td>
                    <td><a href="#" data-bind="click: $root.deleteRole, visible: $index()!=0">Delete Role</a></td>
                </tr>
            </table>
        </td>
        <tr></tr>

ViewModel には多くのコードがありますが、関連する部分は次のとおりです。

 var Role = function(roleId, roleName) {
    this.Id = roleId;
    this.Name = roleName;
};

// Class to represent a row in the Roles DropDown List
function RoleDropDown(initialRole) {
    var self = this;
    self.role = ko.observable(initialRole);
    }

$(function () {

    function myViewModel() {
        var self = this;

//code relating to other fields

// Role Code
        self.Roles = new ko.observableArray();
        @{
            foreach (var pair in Model.RolesList)
            {
                @:self.Roles.push(new Role(@pair.Key,"@pair.Value"));
            }
        }


        // List of Role DropDowns
        self.RoleDdList = ko.observableArray([
                new RoleDropDown(self.Roles()[0])
            ]);


        // Add a Role (code for link on form)
        self.addRole = function() {
            self.RoleDdList.push(new RoleDropDown(self.Roles()[0]));
        };

        // Delete a Role
        self.deleteRole = function(num) {
            self.RoleDdList.remove(num);
        };

        //
        @{
            if(@Model.Roles!=null)
            {

                @:self.RoleDdList.pop();

                foreach (var selectedRole in Model.RoleNumbers)
                {
                    @:self.RoleDdList.push(new RoleDropDown(@selectedRole));
                }
            }
        }



    }

    vm = new myViewModel();
    ko.applyBindings(vm);
    $.validator.unobtrusive.parse('#formUser');


});

この問題の根源について何か考えはありますか?