我有一个表单,它使用jQuery-UI的selectable插件从表中填充列表。如果用户改变主意,我的表单还允许用户删除单个或多个列表项。此功能适用于IE和Firefox。如果用户选择下载列表,该列表也会自动清除并重置表单。这也适用于IE和Firefox。
最后,我添加了一个按钮,删除所有列表项并重置表单,如果用户想从新鲜开始。此功能仅适用于Firefox。在IE中,列表项从它们所在的字段中删除,但由于某种原因$('#newgroups').removeData()
被忽略。我知道这是因为在.remove或.tofile之后,我可以添加一个与早先的但不再存在的组名称相同的组。清除后,尽管表格看起来相同,但使用以前使用的组名称创建列表项失败。
下面是代码(我省略了不涉及与删除列表中的项目或复位形式函数体):
$(function(){
$('#selectable').selectable({
//rules for how table elements can be selected
});
$("input[name='makegroup']").live("click", function(event){
//adding list items
});
$("input[name='removegroup']").live("click", function(event){
event.preventDefault();
groups.msg();
groups.remove(); //works in FF and IE
});
$("input[name='cleargroups']").live("click", function(event){
event.preventDefault();
groups.msg();
return groups.clear(); //partially fails in IE
});
$("form#grouper").submit(function(){
return groups.tofile(); //works in FF and IE
});
groups={
grpmsg: $('#grpmsg'),
grpselections: $('#newgroups'),
grpname: $("input[name='newgroup']"),
filetext: $("input[name='filetext']"),
add: function(){
//add option to this.grpselections and set this.grpselections.data
//compares input data to $grpselections.data() for problems and throws error if necessary
},
remove: function(){
var vals= this.grpselections.val();//selected list items
for(var i in vals){
this.grpselections.data(vals[i]).removeClass('ui-selected chosen');
this.grpselections.removeData(vals[i]);
}
this.grpselections.find(':selected').remove();
this.grpname.focus();
},
clear: function(){ //identical to tofile method of resetting form
this.grpselections.empty();
this.grpselections.removeData();//DOES NOT WORK IN IE
$('#selectable td').removeClass('ui-selected chosen');
this.grpname.focus();
return true;
},
tofile: function(){
this.grpselections.select();
var gtxt='';
this.grpselections.find('option').each(function(i){
gtxt += $(this).text() + "\n";
});
if (gtxt.length === 0) {
this.msg('nonetofile');
return false;
}
this.filetext.val(gtxt);
//BELOW IS IDENTICAL TO clear function EXCEPT IT WORKS IN IE TOO
this.grpselections.empty();
this.grpselections.removeData();
$('#selectable td').removeClass('ui-selected chosen');
this.grpname.focus();
return true;
//END INTERESTING BIT
},
msg: function(msgtype){
//show error message specific to problem
},
addline: function(groupname){
//auxilliary to add function
}
};
});
链接是一个好主意。命令必须是'this.grpselections.removeData()。empty();'而不是相反,但现在IE很开心。也许这是解开版本中的操作顺序是问题所在。 – dnagirl 2010-03-03 13:24:14
很高兴看到你得到保持你的头发:) – 2010-03-03 13:43:28
经过一番思考后,我没有序列不正确。事件冒泡DOM树/链,并且父节点会在子节点之后执行,除非子节点阻止了这一点。 – 2010-03-03 16:18:49