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类的选择器才会选择...

如果要选择选择器不使用 btn类，而选择选择器使用 button类，则必须在JS $(".button")中设置{{ 1}}

在这里学习：https://api.jquery.com/class-selector/

$(".btn")

$(".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;
}

Answer 2

我找到了解决问题的方法。我必须将按钮图像添加为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>

.click（）jQuery函数和Button调用问题

2 个答案: