jQuery点击功能在IE中不起作用

Question

我遇到了一个我写的jQuery脚本问题，这让我有点疯狂。像往常一样，它在Firefox中完美运行，但在所有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和后端代码中的所有代码，这一切都工作。

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

Answer 1

尝试使用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事件，它是在选择自身产生。不过，如果您使用的是多重选择，虽然看起来不是您自己，但这可能会有所不同。

Answer 2

顺便说一下，除了使用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]); 

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

Answer 3

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