IE 9 jQuery错误："对象不支持...'on'"？

Question

我需要帮助。在IE9中出现以下错误。代码在FireFox中可以正常运行：

SCRIPT438: Object doesn't support property or method 'on' 

这是在以下代码中引发的：

$(function() {
    $(document).on('change', '#dropdownval select', function(event) {
        //logic function
    });
});

- user1433824

---

你在使用哪个版本的jQuery? - Sarfraz

你正在使用哪个版本的Jquery？ - Rupesh Pawar

在调用之前，您尝试过 alert(typeof $(document).on); 吗？这将告诉您它是否存在。 - Niet the Dark Absol

jQuery JavaScript库 v1.6.2 - user1433824

我遇到了类似的问题。我正在使用jQuery版本1.5.1。有什么建议吗？ - Vikram

$('#dropdownval select').live('change', ...) 对我有用（在此将评论作为先前评论的答案）。 - Vikram

Answer 1

Firefox可以工作，但IE无法正常运行？

我建议确保两个浏览器都加载了相同的源代码。老实说，在使用jQuery 1.6时，Firefox使用.on方法是不可能的，因为该方法不存在。

在控制台中（在IE中使用F12开发人员工具，在Firefox中使用Firebug），键入以下内容：

jQuery.fn.jquery

这应该返回当前页面加载的jQuery版本。例如，截至今天，在StackOverflow上运行该命令的结果为"1.7.1"。其次，要测试是否存在.on方法，可以在不使用括号的情况下访问它，并使用双重否定将其转换为真布尔值：

!!jQuery.fn.on // True if .on is present, False otherwise

使用jQuery 1.6时，请使用.delegate而不是.on

由于您正在使用jQuery 1.6，因此无法访问在jQuery 1.7中引入的方法.on。适当的备选方案是改用.delegate方法，或者您可以升级到最新版本的jQuery（Microsoft CDN，Google CDN，jQuery CDN）。

.delegate的语法与.on非常相似：

$("#dropdownval").delegate("select", "change", function(event){
    alert( $(this).val() );
});

示例: http://jsfiddle.net/jonathansampson/rMBn4/

如果您决定升级...

您的.on代码几乎正确，但是您不希望将事件绑定得如此深入到document对象 - 这意味着事件需要在处理之前传播可能很长的距离。相反，就像我们在.delegate示例中所做的那样，我们将绑定到靠近选择元素的内容：

$("#dropdownval").on("change", "select", function(event){
    alert( $(this).val() );
});

Fiddle: http://jsfiddle.net/jonathansampson/rMBn4/1/

需要注意的是两者之间的主要区别在于链接方法的前两个参数的顺序。使用.delegate，选择器在事件之前。而使用.on，顺序则相反。

- Sampson

---

只是一个快速的问题，当你在IE的F12开发工具中说“键入jQuery.fn.jquery”时，您是指将其添加为监视元素，还是这些工具中实际可以运行即时JavaScript的某个地方？我之前一直在寻找它，但从未找到过这样的选项。 - chrismay

@chrismay 很好的问题，Chris。你可以在IE 9的控制台中执行代码。 - Sampson

Answer 2

有两种情况可能发生：

1. $ 不是 jQuery，而是在其他地方定义的函数；或者 2. $ 不是正确的 jQuery 版本。 on 是在 1.7 版本中引入的。

对于 jQuery 1.6，可以使用以下方式替代 on：

$(document).on('change', '#dropdownval select', ...)

可以使用 delegate（自1.4版本起，自1.7版起弃用）来编写：

$(document).delegate('#dropdownval select', 'change', ...)

可以使用live（自1.3版起，已弃用）编写：

$('#dropdownval select').live('change', ...) 

请参考文档获取更多选项和注意事项。

使用delegate可以像on一样在body下方附加，而live总是在body级别附加。因此，根据目标位置的不同，上述代码可能可以更有效地编写。

编码愉快。

- user166390

---

那是一个你永远不会知道的神秘。 - Fabrício Matté

@Jashwant 因为事情是善变的。要么我所提出的断言是正确的，我是正确的；要么它们不是真的，我是错误的。无论哪种情况，我都提供了断言来测试/验证 :-) - user166390

@Jashwant，Firefox 对您的代码进行了一些修改，以消除小的不匹配或类似问题。 - uday

@user1433824 不可以。请参考文档。 - user166390

如果可用delegate()（就像您的情况一样），请使用delegate()而不是live()，即使您认为需要live()。有一个原因，导致live()被弃用并支持delegate()。 - Tadeck