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

Posted 2023-05-09

【中文标题】jQuery .on() 方法在 Chrome 中不起作用（但在 IE 和 FF 中起作用）

【英文标题】：jQuery .on() Method Not Working In Chrome (but does in IE & FF)

【发布时间】：2013-03-12 20:37:44

【问题描述】：

我的 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() （不推荐使用后者）来委托到未来的选择。

有人对此有什么想法吗？？？

【问题讨论】：

你能为此做一个 js fiddle 吗？

为什么选项元素上的点击事件而不是包含它的选择上的更改事件？另外，页面加载时是否存在所有这些选项？

一个选项不会在 Chrome 中触发点击事件。

您应该使用change 事件作为选项，而不是点击事件。

正如我在原始帖子底部所解释的那样，我没有在选择本身上使用更改事件，因为如果选择中只有一个选项（有时可能会有)，则不会触发更改事件。即使未单击选项，选择本身也会触发单击事件。不知道这里有什么解决方案。

【参考方案1】：

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

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

【讨论】：

因此 Chrome 不会像 IE 和 FF 那样为选项元素引发点击事件。所以解决方案是在 select 上使用 change 事件，然后确保有一个默认的“--Make A Selection--”选项始终可用，如果只有一个有效选项可供选择（单击），则将触发 change 事件.

是的 - 尽管有一个问题：怎么可能只有一个选项？我的意思是，在这种情况下，您不应该根本不提供此选项或默认选择它吗？

根据要求，因为项目是从下拉列表中选择的，它们会从列表中动态删除。

基于这个答案，我在 Chrome 中的问题得到了解决。我选择将文本捕获到一个变量中：`var opt = jQuery(this).children(":selected").text();