Why is this jQuery click function not working

Question

Code    lt script src  http   code jquery com jquery-latest min js  type  text javascript  gt  lt  script gt   lt script type  text javascript  gt          clicker   click function              alert  Hello                 hide div   hide             lt  script gt    The above code doesn t work   When I click on  clicker  it doesn t alert and and it doesn t hide   I checked the console and I get no errors   I also checked to see if JQuery was loading and indeed it is   So not sure what the issue is   I also did a document ready function with an alert and that worked so not sure what I am doing wrong   Please help   Thanks

User · Accepted Answer

You are supposed to add the javascript code in a $(document).ready(function() {}); block.

i.e.

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

As jQuery documentation states: "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute"

User · Answer

Be sure there is nothing on your button  such a div or a trasparent img  that keeps from clicking the button   It sounds stupid  but sometimes we think that jQuery is not working and all that stuffs and the problem is on the positioning of DOM elements

User · Answer

You can use   function        code      which is executed when the document is ready to execute the code inside that block     function            clicker   click function            alert  hey                hide div   hide

User · Answer

I found the best solution for this problem by using ON with   document       document  on  click     yourid   function     alert  hello          for id start with see below     document  on  click    div id   start     function     alert   hello          finally after 1 week I not need to add onclick triger  I hope this will help many people

User · Answer

Try adding   document  ready function    to the beginning of your script  and then      Also  does the div have the id in it properly  i e   as an id  not a class  etc

User · Answer

Your code may work without document ready   just be sure that your script is after the  clicker  Checkout this demo  http   jsbin com aPAsaZo 1   The idea in the ready concept  If you sure that your script is the latest thing in your page or it is after the affected element  it will work    lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  head gt   lt body gt     lt script src  https   code jquery com jquery-latest min js          type  text javascript  gt  lt  script gt     lt a href     id  clicker  value  Click Me    gt Click Me lt  a gt     lt script type  text javascript  gt               clicker   click function                  alert  Hello                     hide div   hide                    lt  script gt    lt  body gt   lt  html gt    Notice  In the jsbin demo replace http with https there in the code  or use this variant Demo

User · Answer

Just a quick check  if you are using client-side templating engine such as handlebars  your js will load after document ready  hence there will be no element to bind the event to  therefore either use onclick handler or use it on the body and check for current target

User · Answer

Proper Browser Reload Just a quick check as well if you keep your js files separately  make sure to reload your resources properly  Browsers will usually cache files  so just assure that i e  a former typo is corrected in your loaded resources  See this answer for permanent cache disabling in Chrome Chromium  Otherwise you can generally force a full reload with Ctrl F5 or Shift F5 as mentioned in this answer

User · Answer

You have to wrap your Javascript-Code with   document  ready function      Look this JSfiddle   JS Code     document  ready function              clicker   click function              alert  Hello                 hide div   hide

[javascript] Why is this jQuery click function not working?

Examples related to javascript

Examples related to jquery

Examples related to onclick

Examples related to click

Examples related to onclicklistener