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']
                })

すべてが正常に機能し、次の場合に期待どおりに long 値を取得します。

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(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 はこれを修正する必要があります。

于 2010-07-10T11:50:32.360 に答える