JQuery | функция щелчка не работает в Firefox, но работает в Chrome - PullRequest
Новая
       5

JQuery | функция щелчка не работает в Firefox, но работает в Chrome

0 голосов
/ 06 апреля 2019

Я создал 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.

Ответы [ 2 ]

0 голосов
/ 06 апреля 2019

Вы добавили обработчик кликов в тег <i>, что означает, что вам нужно нажать на значок.Это не проблема Firefox, он не будет работать и в Chrome, если вы щелкнете за пределами значка.

Если вы хотите щелкнуть вне значка и иметь возможность ответить на щелчок, добавьте обработчик клика к кнопкевместо тега <i>. 

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

Надеюсь, я ответил на ваш вопрос.

0 голосов
/ 06 апреля 2019

Я обнаружил, что следующий код работает нормально. Не могли бы вы проверить это. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...