我有一個表單,它使用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