0

我在 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);

当它应该返回一个 long 时，它返回了一个“on”的值。事实证明，问题在于定义属性的顺序。如果我改变这个：

            $(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);

我的问题是为什么？

测试数据：

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"}
  ]};
4

1 回答 1

2

似乎无论出于何种原因，IE（至少是 IE8）和 Opera 都没有value通过更改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应该解决这个问题。

于 2010-07-10T11:50:32.360 回答