jQuery單擊功能在IE中不起作用

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上打開。 要禁用，請看這個 。