Я использую кнопку изображения для вызова функции с помощью обработчика событий jcery .click ().
Когда я нажимаю на кнопку, отображается журнал, но не выводится предупреждение.это показывает предупреждение только тогда, когда я нажимаю на край кнопки.
Любая помощь будет высоко ценится, и мне нужно спросить, почему я должен поставить BTN.
$(".button").click(function(event) { console.log('call') if (event.target.id === "btnMakeCall") { var destination = "james"; alert("destiination"); } });
.button { background-color: #4CAF50; border: none; background: transparent; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; outline: none; } <link rel="style
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <button id="btnMakeCall" class="button"> <img src ="(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png"> </button>
Я нашел решение для моей проблемы.Я должен добавить изображение кнопки в качестве фонового изображения в CSS, а не использовать непосредственно между кнопкой.
<html> <head> <style> .button1 { font-size: 18px; border: 2px solid #AD235E; background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png); width: 150px; height: 150px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <button id="btnMakeCall" class="button1"> </button> <script src="add.js"></script> <script>$(".button1").click(function(event) { console.log('call') if (event.target.id === "btnMakeCall") { var destination = "james"; alert("destiination"); } }); </script> </body> </html>
Когда вы устанавливаете $(".btn"), это означает, что только селектор с btn классом будет выбирать ...
$(".btn")
btn
Если вы хотите селектор без btn класса и с button класс, который вы должны установить в JS $(".button") вместо $(".btn")
button
$(".button")
Узнайте здесь: https://api.jquery.com/class-selector/
$(".button").click(function(event) { console.log('call') });
.button { background-color: #4CAF50; border: none; background: transparent; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; outline: none; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <button id="btnMakeCall" class="button">btn <img src="images/icon-alarm-on.png" style="width:60%; height: auto; margin: auto;" /> </button>