Question

我有一个问题，我写的jQuery脚本让我有点疯狂。像往常一样，它在Firefox中完美运行，但在所有IE版本中都有效。

我有以下HTML。它是使用Velocity生成的，因此它应该是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错误。我试图通过它，但看起来“click”函数根本没有绑定到任何元素，因为没有调用这些警报，并且调试器中永远不会遇到断点。我尝试直接在浏览器中调用AJAX URL，但与Firefox不同，我没有得到JSON输出，IE尝试下载操作并失败。

我已经完成了Firefox和后端代码中的所有代码，这一切都在运行。

任何人都可以看到我所做的事情可能出现什么问题吗？

Answer 1

尝试使用change事件而不是click事件。也就是说，更改选择后，请使用相关数据更新用户选择。另请注意，从组选择中获取所选选项的更改（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事件，它是在select本身上生成的。但是，如果你使用的是多选，这可能会有所不同，尽管它看起来不像你。

Answer 2

顺便提一下，除了使用change事件之外......如果用户名可能包含&或<字符，则表示您有错误和潜在的跨站点 - 编写安全漏洞，从而将字符串与HTML粘在一起而没有正确的转义。

基于字符串的方法效率也很低，因为jQuery每次调用它时都必须创建并丢弃一个select包装器。避免使用字符串中的内容创建动态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

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

3 个答案: