JQuery button OnClick not triggering-CodePudding

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 >
                    <div >
                        <button type="button"  id="btnRetrieveCallerMatches" disabled style="display:none;">Retrieve 
                            caller matches</button>
                        <button type="button"  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.

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

$(function () {

 $(document).ready(function () {
        $(document).on('click',"#btnName.app",function (e) {
            e.preventDefault()
            console.log("clicked");
        });
    });

})

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

CodePudding user response：

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();
    });