javascript - jQuery .on() 方法在 Chrome 中不起作用(但在 IE 和 FF 中起作用)

Question

我的 jQuery 代码在 IE 9 和 FF 19 中都可以正常执行，但在 Chrome 版本 25.0.1364.172 中似乎无法正常工作。使用 jQuery 1.7.1

我有 2 个下拉列表和一个按钮。在初始页面加载时，单击事件处理程序通过 jQuery 连接到 ddlists 和按钮中的选项元素。在 IE 和 FF 中，事件处理程序都会为所有 3 个事件触发。效果很好。然而，在 Chrome 中，只有按钮事件处理程序被触发 - 而不是选择选项的点击事件处理程序。

 $(document).ready(function () {

    $('#ddlCategory').on('click', 'option', function (event) {

        // BREAKPOINT ON FIRST LINE IN THIS BLOCK NEVER HITS WHILE IN CHROME BUT DOES IN IE & FF
        if ($(event.target).val() == -1)
            return;
       more code...
    });

    $('#ddlSubCategory').on('click', 'option', function (event) {
        ResetSubCatOptionDisplay();
        var selectedId = $(event.target).val();           
        more code....
       // BREAKPOINT ON FIRST LINE IN THIS BLOCK NEVER HITS WHILE IN CHROME BUT DOES IN IE & FF
    });

    $('#btnAddSubCat').click(function (event) {
        ManageWarningDisplay(false, "");

        more code...
        // BREAKPOINT ALWAYS HITS ON FIRST LINE IN THIS BLOCK FOR ALL 3 BROWSERS
     });

    more code ..... 

});

我想也许 'on()' 函数在 Chrome 中不起作用，所以我也尝试使用以下语法，但同样的结果。似乎根本没有连接处理程序，因为断点不会像按钮的事件处理程序那样在 Chrome 开发工具中命中。

    $('#ddlCategory option').click(function (event) { ...

考虑到 Chrome 可能不喜欢“选项”元素上的点击事件，我考虑尝试连接事件处理程序来选择元素本身，但即使用户点击向下箭头它也会触发。

我使用这些事件的原因:我不想使用 'onchange' 事件，因为当用户单击选择中的唯一选项时它不会触发(如果在某些情况下只有一个) ，将会有)。另外，对于 ddlSubCategory 控件，我将在运行时在客户端动态删除和添加选项元素，因此我需要使用 $().on() 或 $().live() (后者已弃用)来委托(delegate)到 future 的选择。

有人对此有任何想法吗？？？

Answer 1

点击事件对选项无效。它在 select 上有效，所以这是解决方法:

$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});