Pourquoi l'ordre de définition des attributs pour une case à cocher créée dynamiquement dans jquery affecte-t-il sa valeur?

Question

Je possède ce code dans un fichier 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); 
} 

je perdais un peu de temps dans d'autres sections de code à essayer de comprendre pourquoi un appel à

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

retournait une valeur de « sur "quand il devrait revenir longtemps. Il s'avère que le problème est l'ordre dans lequel les attributs sont définis. Si je change ceci:

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

à ceci:

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

tout fonctionne bien et je reçois ma longue valeur comme prévu lorsque i:

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

Ma question est pourquoi?

données de test:

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

Answer 1

Il semble que, pour une raison quelconque, IE (IE8 au moins) et Opera ne retenons pas l'attribut value (bien que Chrome/Firefox faire) en modifiant la type. Voici un test simplifié:

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

You can try it here

IE8/alertes Opera:

• "sur"
• <input type="checkbox">

Chrome/Firefox alerte:

• « Test »
• <input type="checkbox" value="Test">

Je ne sais pas pourquoi Opera en particulier se comporte de cette façon, mais en tout cas ... juste essayer de mieux démontrer le problème, la solution est bien sûr pour conserver l'attribut type en premier. Peut-être qu'une future version de jQuery traitera type d'abord dans la boucle, bien que si le <input> a été défini avec des attributs plus tôt cela ne ferait pas beaucoup de bien.

Cependant, le format $("<input />", { value: 'Test', type: 'checkbox' }); souffre le même problème, IMO ce devrait être être fixé.