2010-03-02 52 views
1

我有一个表单,它使用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     
     } 
    }; 

}); 

回答

1

首先要承认我没有使用可选择的东西,因此,在黑暗中拍摄一张照片,你能链接吗?

this.grpselections.empty().removeData(); 
+0

链接是一个好主意。命令必须是'this.grpselections.removeData()。empty();'而不是相反,但现在IE很开心。也许这是解开版本中的操作顺序是问题所在。 – dnagirl 2010-03-03 13:24:14

+0

很高兴看到你得到保持你的头发:) – 2010-03-03 13:43:28

+0

经过一番思考后,我没有序列不正确。事件冒泡DOM树/链,并且父节点会在子节点之后执行,除非子节点阻止了这一点。 – 2010-03-03 16:18:49

0

没有足够的信息在这里。尝试放置一个调试器;声明在代码中并打开ie8开发人员工具来调试脚本并查看正在发生的事情。

+0

我打开ie8开发人员工具,问题就消失了。我关闭了开发人员工具,问题又回来了。如果我不是那么*女仆*;)我会发誓激烈! – dnagirl 2010-03-02 20:59:06

+0

听起来像你可能有一个console.log语句可能破坏代码?你可以粘贴整个标记和脚本。 – redsquare 2010-03-02 22:11:38