Best IT Recipes

Why is this jQuery click function not working?

the code:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#clicker").click(function () { alert("Hello!"); $(".hide_div").hide(); }); </script>

The code above does not work. When I click on #clicker, it does not warn or hide. I checked the console and I did not get any errors. I also checked if jQuery loads and if it really is. Therefore, Iā€™m not sure what the problem is. I also made the alert document ready function and it worked, so I'm not sure what I'm doing wrong. Please help. Thank!

+101
javascript jquery click onclick onclicklistener
Sep 03 '13 at 22:12
source share
8 answers

You must add javascript code to the $(document).ready(function() {}); block $(document).ready(function() {}); .

i.e.

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

As the jQuery Documentation states: "You cannot safely manipulate a page until the document is ready." jQuery detects this ready state. The code included inside $( document ).ready() is only executed after the Document Object Model (DOM) page is ready to execute JavaScript code for

+159
03 Sep '13 at 22:14
source share

I found a better solution for this problem using ON with $ (document).

  $(document).on('click', '#yourid', function() { alert("hello"); });

to start id, see below:

 $(document).on('click', 'div[id^="start"]', function() { alert ('hello'); });

finally after 1 week I don't need to add onclick triger. Hope this helps a lot of people.

+43
03 Dec '15 at 19:22
source share

Your code may work without document.ready (), just make sure your script is after #clicker. Checkout demo: http://jsbin.com/aPAsaZo/1/

Idea in the finished concept. If you are sure your script is the most recent on your page or located after the affected item, it will work.

 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <a href="#" id="clicker" value="Click Me!" >Click Me</a> <script type="text/javascript"> $("#clicker").click(function () { alert("Hello!"); $(".hide_div").hide(); }); </script> </body> </html>

Note: In jsbin demo, replace http with https is in the code, or use this option Demo

+21
Sep 03 '13 at 22:25
source share

You should wrap your Javascript code in $(document).ready(function(){}); See this JSfiddle .

JS Code:

 $(document).ready(function() { $("#clicker").click(function () { alert("Hello!"); $(".hide_div").hide(); }); });
+6
03 Sep '13 at 22:18
source share

Try adding $(document).ready(function(){ to the top of your script, and then }); . Also, does the div identifier have the correct id, i.e. Like id, not class, etc.?

+5
Sep 03 '13 at 22:14
source share

Make sure that there is nothing on your button (such a div or trasparent img) that you should not click on the button. It sounds silly, but sometimes we think that jQuery is not working, and all that is, and the problem is positioning the DOM elements.

+3
03 Oct '14 at 10:23
source share

You can use $(function(){ // code }); , which is executed when the document is ready to execute code inside this block.

 $(function(){ $('#clicker').click(function(){ alert('hey'); $('.hide_div').hide(); }); });
+3
Mar 08 '17 at 11:04 on
source share

Just a quick check, if you use a client-side template engine such as a steering wheel, your js will load after document.ready, therefore, there will not be an element with which you need to associate an event, so either use the onclick handler or use it on the body and check current goal

+2
04 Oct '16 at 10:10
source share


More articles:


All Articles