Error with invoking the .click() method in jQuery and problem with calling a

Question

Error with invoking the .click() method in jQuery and problem with calling a

Using an image button to trigger a function with the .click() jQuery event handler.

Upon clicking the button, it displays a log message but does not show the alert message. The alert message only appears when clicking on the edge of the button.

Any help would be greatly appreciated, and I am curious why "btn" needs to be included.

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

jquery css html bootstrap-4

Answer 1

Answer №1

When you utilize $(".btn"), it means that only selectors with the btn class will be selected...

If you want a selector excluding the btn class and including the button class, you should use $(".button") in your JavaScript instead of $(".btn")

More information can be found here: 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>

Answer 2

When you utilize $(".btn"), it means that only selectors with the btn class will be selected...

If you want a selector excluding the btn class and including the button class, you should use $(".button") in your JavaScript instead of $(".btn")

More information can be found here: 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>

Answer 3

Answer №2

I was able to solve my problem by incorporating the button image as a background image in CSS instead of directly inserting it within the button element.

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

Answer 4

I was able to solve my problem by incorporating the button image as a background image in CSS instead of directly inserting it within the button element.

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

Error with invoking the .click() method in jQuery and problem with calling a

Answer №1

Answer №2

Similar questions

What is the best way to make a CSS change triggered by a onScroll() event stay in place permanently?

Avoid running another process before the current one finishes in jQuery

Transform jQuery code to its equivalent in vanilla JavaScript

Multi-line auto-suggest list with typeahead functionality

Is the ID Column in the Minimal Material Table Demo not appearing as expected?

Arranging adjacent div blocks to maintain alignment in a stylish way

Enhancing the appearance of text in an article by using hover effects, while ensuring the link is attached to the

Determining the index of the last clicked tab in jQuery UI tabs

The problem of duplicate ids: Once an id is used, it cannot be

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

using an SVG mask declared in HTML to apply masking

Looking for assistance with submitting two forms in one AJAX request to a single file.php

Tips for serving a JSON text file to a client-side AJAX request from a Node.js server

My bootstrap collapse navbar isn't functioning properly. Despite pressing the icon on a smaller screen, the menu fails to open. Can anyone provide a solution to this issue?

Bootstrap only allows for styling the border row and outside of a table

The jQuery window.load() function fails to execute on iOS5 devices

Adjusting jQuery Button Width with input type of "button"

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

Tips for implementing jQuery on HTML loaded post document.ready():