Question

我已经创建了一个带有按钮的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中有效。

Answer 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>

Answer 2

您已将点击处理程序添加到<i>标记中，这意味着您需要单击该图标。这不是Firefox的问题，如果您在图标外部单击，它也无法在chrome中使用。

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

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

希望我回答了你的问题。

jQuery |点击功能不适用于Firefox，但适用于Chrome

2 个答案: