javascriptjqueryonclickclickonclicklistener

Why is this jQuery click function not working?


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


Solution

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