jQuery |点击功能在 Firefox 中不起作用，但在 Chrome 中起作用答案

【问题标题】：JQuery | click function not working in Firefox, but working in ChromejQuery |点击功能在 Firefox 中不起作用，但在 Chrome 中起作用
【发布时间】：2019-04-06 18:14:07
【问题描述】：

我创建了一个带有按钮的 HTML 文件。有一个 JavaScript 文件，其中包含在按下按钮时向浏览器开发者控制台打印消息的代码。

在 Chrome 中一切正常，但在 Firefox 中却不行

关于将“事件”作为参数显式传递给与操作关联的函数，我在 SO 上遇到了一些问题，我已经这样做了，但仍然没有收到 Firefox 的响应。

这是我的 JS

$("document").ready(function(){
        console.log('JS loaded');
         $("i.fa-trash-alt").click(function(event){
            console.log('Delete icon pressed');
        });
        })

这是我的 HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>Playground</title>
</head>
<body>
<div class="container-fluid">

<button type="button" class="btn btn-warning"><i class="fa fa-trash-alt"></i></button>

</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="test.js"></script>
</body>
</html>

如果我遗漏了某些步骤或是否需要任何其他信息，请告知。

更新 - 解决方法

作为一种解决方法，我将“删除”事件链接到按钮而不是图标。这似乎在 Firefox 中有效。

【问题讨论】：

$("document") 应该是 $(document)。 document 是一个全局窗口对象
感谢@charlietfl 的提示

标签： jquery firefox

【解决方案1】：

我发现以下代码运行良好。请您检查一下。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>Playground</title>
</head>
<body>
<div class="container-fluid">

<button type="button" class="btn btn-warning"><i class="fa fa-trash-alt"></i></button>

</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
    $("document").ready(function(){
        console.log('JS loaded');
         $("i.fa-trash-alt").click(function(event){
            console.log('Delete icon pressed');
        });
    }); 
</script>
</body>
</html>

【讨论】：

我试过了，但它对我不起作用。可以肯定的是 - 它不仅在 Firefox 中工作。我上传了一个显示相同的视频。 video
它在 Firefox 66.0.2（64 位）上运行良好

【解决方案2】：

您向<i> 标签添加了点击处理程序，这意味着您需要点击该图标。这不是 Firefox 的问题，如果您在图标之外单击，它也无法在 chrome 中运行。

如果您想在图标外部单击并能够响应单击，请将单击处理程序添加到按钮而不是 <i> 标记。

$("document").ready(function(){
    console.log('JS loaded');
     $(".btn").click(function(event){
        console.log('Delete icon pressed');
    });

希望我回答了你的问题。

【讨论】：

我已经在使用它作为我的更新部分中提到的解决方法。然而，这不是最初的问题。我正在单击 Firefox 和 Chrome 中的图标。它只是在 Firefox 中不起作用。我已经加载了一个视频来展示link的行为
我在 Firefox 66.0.2（64 位）中尝试了你的代码，它的工作方式符合我的预期
谢谢@Rojen！这有帮助。我正在使用扩展支持版本，最新版本是 (60.6.1)。我下载了和你一样的版本，它在那里工作。所以看起来像 ESR 版本中的错误/缺乏功能。将与 Mozilla 确认如何对此进行规划（因为我公司的每个人都使用 ESR 版本）。