作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 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']
})
一切正常,当我执行以下操作时,我得到了预期的长期值(value):
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"}
]};
最佳答案
无论出于何种原因,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
属性第一。也许 future 的 jQuery 版本将处理 type
首先在循环中,但如果 <input>
之前定义了任何属性,但这仍然没有多大作用。
但是,$("<input />", { value: 'Test', type: 'checkbox' });
格式也遇到同样的问题,IMO 这个应该被修复。
关于javascript - 为什么在 jquery 中动态创建的复选框定义属性的顺序会影响其值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3218898/
我是一名优秀的程序员,十分优秀!