Question 37101 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery button OnClick not triggering

Hope everybody is having a good day. I had this buton and code, which worked for me.
I also followed the jQuery documentation: https://api.jquery.com/click/

$(function () {
    $("#btnName").click(function () {
            console.log("test");
        });

}

I then upgraded webpack and JQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

If anybody can help me out that would be awesome. Thanks in advance.

Edit: HTML for button:

  <!-- NEW CONTACT BUTTON -->
                <div class="new-contact-buttons">
                    <div class="btn-grouped">
                        <button type="button" class="btn btn-default btn-block bottom" id="btnRetrieveCallerMatches" disabled style="display:none;">Retrieve 
                            caller matches</button>
                        <button type="button" class="btn btn-default btn-block bottom" id="btnNewContactForm" disabled style="display:none;">New
                            contact</button>
                    </div>
                </div>

I am now trying this code, but unfortunately its still not working:


$(function () {


   $("#btnNewContactForm").click(function () {
     console.log("@@@@@@@@ clicked new contact")
     });

});

I re-enable the button when I need it using:

    $("#btnNewContactForm").show();
    $("#btnNewContactForm").removeAttr("disabled");

And the button shows up so that piece of code works.

I also checked if the top function is being executed and it is.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Just before the button code I had a sort method:

    $(".phonebook table").tablesorter();

    I think because the upgrade (webpack or jquery) this function stopped working and it wouldn't execute any code after this. So the code was fine all along but the binding code wasn't executing. Sorry for wasting everyones time.

    When I put this code before the tablesorter everyting worked fine:

    
    $("#btnNewContactForm").click(function () {
        console.log("@@@@@@@" + "saving new contact");
        newContact();
    });

  2. 0

    Try this :

    <!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  </head>

  <body>
    <button id="btnName">click me</button>
  </body>

  <script type="text/javascript">
    $(document).ready(function () {
      $("#btnName").on("click", function () {
        console.log("test");
      });
    });
  </script>
</html>
    Login or Signup to reply.
  3. 0

    In each and every one of your examples you are forgetting to close your function, small syntax mistake, but the following code will work

    $(function () {
    $(document).ready(function() {
           $("#btnName").click(function () {
               console.log("test");
           });
      });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnName">Hi</button>
    Login or Signup to reply.
  4. 0 
    $(function() {
  $(document).on('click', "#btnName.app", function(e) {
    e.preventDefault()
    console.log("clicked");
  });
});

    you forgot to put ")" in the end of $(function(){...})

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search