jQuery-UI의 selectable 플러그인을 사용하여 테이블의 목록을 채우는 양식이 있습니다. 내 양식을 사용하면 사용자가 마음이 바뀌면 하나 또는 여러 개의 목록 항목을 제거 할 수 있습니다. 이 기능은 IE와 Firefox에서 작동합니다. 사용자가 목록을 다운로드하도록 선택하면 목록이 자동으로 지워지고 양식이 재설정됩니다. 이것은 IE와 Firefox에서도 작동합니다.
마지막으로 사용자가 새로 시작할 때 모든 목록 항목을 제거하고 양식을 다시 설정하는 단추를 추가했습니다. 이 기능은 Firefox에서만 작동합니다. IE에서는 목록 항목이있는 필드에서 제거되지만 어떤 이유로 인해 $('#newgroups').removeData()
은 무시됩니다. 나는 .remove 나 .tofile 다음에 이전 이름이지만 더 이상 존재하지 않는 그룹과 같은 이름을 가진 그룹을 추가 할 수 있기 때문에 이것을 안다. .clear 다음에 양식이 동일하게 보이지만 이전에 사용한 그룹 이름으로 목록 항목을 만드는 것은 실패합니다. 여기
$(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
머리가 잘 붙어있는 것을 보니 좋다. –
몇 가지 생각을하고 나니, 순서가 잘못되었다. 이벤트는 DOM 트리/체인을 버블 링하고, 자식이 이것을 막지 않는 한 부모는 자식 후에 실행됩니다. –