Почему порядок определения атрибутов для динамически создаваемого флажка в jquery влияет на его значение? - PullRequest
Новая
       8

Почему порядок определения атрибутов для динамически создаваемого флажка в jquery влияет на его значение?

0 голосов
/ 10 июля 2010

У меня есть этот код в js-файле: 

function buildRolePicker() {
    var pnl = $("[id$='staffRoles']");
    $.each(roles["ContactGroupRoles"], function(iteration, item) {
        pnl.append(
                $(document.createElement("input")).attr({
                    id: 'cgr' + item['RoleId'],
                    name: 'cgroles',
                    value: item['RoleId'],
                    title: item['RoleName'],
                    type: 'checkbox'
                })
        );
        pnl.append(
                $(document.createElement('label')).attr({
                    'for': 'cgr' + item['RoleId']
                })
                .text(item['RoleName'])
        );
    });

    alert(document.forms[0].cgroles[8].value);
}

Я тратил некоторое время на другие разделы кода, пытаясь понять, почему возвращался вызов 

alert(document.forms[0].cgroles[8].value);

значение «on», когда оно должно возвращать long.Оказывается, проблема заключается в порядке, в котором определяются атрибуты.Если я изменю это: 

            $(document.createElement("input")).attr({
                id: 'cgr' + item['RoleId'],
                name: 'cgroles',
                value: item['RoleId'],
                title: item['RoleName'],
                type: 'checkbox'
            })

на это: 

                $(document.createElement("input")).attr({
                    type: 'checkbox',
                    id: 'cgr' + item['RoleId'],
                    name: 'cgroles',
                    value: item['RoleId'],
                    title: item['RoleName']
                })

все работает нормально, и я получаю свое длинное значение, как и ожидалось, когда я: 

alert(document.forms[0].cgroles[8].value);

Myвопрос почему?

данные испытаний: 

var roles = {"ContactGroupRoles":[
    {"RoleId":1,"RoleName":"Pending"},
    {"RoleId":2,"RoleName":"CEO"},
    {"RoleId":3,"RoleName":"Financial Controller"},
    {"RoleId":4,"RoleName":"General Manager"},
    {"RoleId":5,"RoleName":"Production Manager"},
    {"RoleId":6,"RoleName":"Sales Manager"},
    {"RoleId":7,"RoleName":"Marketing Manager"},
    {"RoleId":8,"RoleName":"Sales Agent"},
    {"RoleId":9,"RoleName":"Customer Service"},
    {"RoleId":10,"RoleName":"Manager"}
  ]};

1 Ответ

2 голосов
/ 10 июля 2010

По какой-то причине IE (по крайней мере, IE8) и Opera не сохраняют атрибут value (хотя это делает Chrome / Firefox) путем изменения type. Вот упрощенный тест: 

$(document.body).append(
    $("<input />").attr({
        value: 'Test',
        type: 'checkbox'
    })
);
alert($("input").val());
alert(document.body.innerHTML);

Вы можете попробовать это здесь

IE8 / Opera оповещения:

  • "на"
  • <input type="checkbox">

Предупреждения Chrome / Firefox:

  • "Тест"
  • <input type="checkbox" value="Test">

Я не уверен, почему Opera, в частности, ведет себя так, но в любом случае ... просто пытаясь лучше продемонстрировать проблему, решение, конечно, состоит в том, чтобы сначала сохранить атрибут type. Возможно, в будущем выпуске jQuery будет обрабатываться type первым в цикле, хотя, если <input> был определен с какими-либо атрибутами ранее, это все равно не принесет пользы.

Тем не менее, формат $("<input />", { value: 'Test', type: 'checkbox' }); страдает той же проблемой, IMO это должно быть исправлено.

...