jquery - .click() jquery 函数和 Button 调用问题

Question

我正在使用图像按钮调用使用 .click() jquery 事件处理函数的函数

当我点击按钮时，它显示日志，但不显示警报消息。它仅在我单击按钮边缘时显示警报消息。

任何帮助将不胜感激，需要问我为什么必须放 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>

Answer 1

当您设置 $(".btn") 时，这意味着只有具有 btn 类的选择器才会选择...

如果你想要选择器 without btn class 和 with button class 你必须在 JS $(".button") 而不是 $(".btn")

在这里学习: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>