2009-12-14 65 views
4

我遇到了一个我写的jQuery脚本问题,这让我有点疯狂。像往常一样,它在Firefox中完美运行,但在所有IE版本中都会出现问题。jQuery点击功能在IE中不起作用

我有以下的HTML。它是利用速度所产生,所以应该是属于DOM的一部分:

<select name="groups" id="groups" type="select"> 
<option value="group1">group1</option> 
<option value="group2">group2</option> 
<option value="group3">group3</option> 
</select> 

我的jQuery脚本是这样的:

jQuery(document).ready(function() { 
    jQuery("#groups option").click(function() { 
     alert(group); 
     var group = jQuery(this).attr("value"); 
     AJS.safe.ajax({ 
      url: "/plugins/userlookup/userlookup.action", 
      type: "POST", 
      dataType: "json", 
      data: { 
       group: group 
      }, 
      success: function(data) { 
       alert(data); 
       jQuery("#users").empty(); 
       for(var i=0; i < data.userList.length; i++) { 
        var userstr = "<option value=\""+data.userList[i]+"\">"+data.userList[i]+"</option>"; 
        jQuery("#users").append(userstr); 
       } 
      } 
     }); 
    }); 
}); 

基本上有一个下拉“群体”的名单,并在选择一个组AJAX调用是从该组获取用户并填充另一个字段。在IE中,选择组什么都不做,也没有给出任何Javascript错误。我试图通过它,但看起来像“点击”功能根本没有绑定到任何元素,因为没有任何这些警报被调用,并且断点在调试器中从未被击中。我已经尝试直接在浏览器中调用AJAX URL,但与Firefox不同,我没有得到JSON输出,IE尝试下载操作并失败。

我已经遍历了Firefox和后端代码中的所有代码,这一切都工作。

任何人都可以看到我做了什么可能是错的?

回答

4

尝试使用change事件而不是点击事件。也就是说,当选择被改变时,然后用相关数据更新你的用户选择。另请注意,更改以从组中选择选项(this将成为选择而不是选项)。

jQuery(document).ready(function() { 
    jQuery("#groups").change(function() { 
     var group = jQuery(this).find(':selected').attr('value'); 
     AJS.safe.ajax({ 
       url: "/plugins/userlookup/userlookup.action", 
       type: "POST", 
       dataType: "json", 
       data: { 
         group: group 
       }, 
       success: function(data) { 
         alert(data); 
         jQuery("#users").empty(); 
         for(var i=0; i < data.userList.length; i++) { 
           var userstr = "<option value=\""+data.userList[i]+"\">"+data.userList[i]+"</option>"; 
           jQuery("#users").append(userstr); 
         } 
       } 
     }); 
    }); 
}); 

我认为,实际上并不在IE浏览器中产生的选项元素click事件,它是在选择自身产生。不过,如果您使用的是多重选择,虽然看起来不是您自己,但这可能会有所不同。

+0

非常感谢,这工作很好! – jenny 2009-12-14 01:48:08

+0

'select-many'也没有脚本选项。这两种选择在IE中都是不可分割的小部件,因此您只有极少的脚本编写机会。在任何情况下,HTML和DOM标准都没有提及表单字段的内部,所以不建议依赖它们。 – bobince 2009-12-14 02:33:27

0

顺便说一下,除了使用change事件......如果一个用户名可以具有在&<性格,你有一个错误的和潜在的跨站点脚本安全漏洞,从你那里卡住字符串与HTML一起没有适当的逃避。

基于字符串的方法也效率不高,因为jQuery每次调用它时都必须创建并丢弃一个选择包装。避免使用字符串中的内容创建动态HTML;在适当的地方使用DOM方法以及jQuery。例如:

var options= $('#users')[0].options; 
options.length= 0; 
for(var i= 0; i<data.userList.length; i++) 
    options[i]= new Option(data.userList[i]); 

...比字符串黑客变体更短,更快,更容易阅读和更安全。

0

此外,在我的情况下,可能的原因是Internet Explorer增强安全配置(ESC)。默认情况下,Windows 2008 Server上已启用该功能。 To disable, see this