Jquery .click not firing

Question

Trying to learn JQuery here, im starting off really simple.

When I click the button, the page reloads and nothing happens.

Heres my JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
  $("#submitShout").click(function() {  
  alert('hi');
  });  

  </script>

Here's my html:

<div class="panel right">   
<form name="shout" >
<textarea name="text" id="text" class="ribbitText"></textarea>
<input type="submit" id="submitShout" value="Ribbit!">
</form>
</div>

Answer 1

i think you forgot document.ready..

$(function () { //<--- here..the codes below is called whn document is ready
    $("#submitShout").click(function () {
        alert('hi');
    });
});

Answer 2

Make sure you include jQuery reference and you code surrounded with

$(function(){

});

as

$(function () {
    $("#submitShout").click(function () {
        alert('hi');
    });
});

or click binded at the end of the document

Answer 3

Just try this,

$("#submitShout").on("click", function() {  
  alert('hi');
});  

If it is lower version Jquery, try this.

$("#submitShout").live("click", function() {  
      alert('hi');
});  

Answer 4

jQuery 1.9 version

$(function(){
    $("#submitShout").on('click',function(){
        //your code
        });
});

jQuery version lower than 1.9

$(function(){
     $("#submitShout").live('click',function(){
            //your code
            });
});

Answer 5

that's a really old jquery version, upgrade it to something newer:

https://developers.google.com/speed/libraries/devguide#jquery

Answer 6

I guess Either you are missing the doc ready handler or the jQuery lib :

first try with this:

   $(function(){
     $("#submitShout").click(function() {  
         alert('hi');
      }); 
   });

then this one:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
   $(function(){
     $("#submitShout").click(function() {  
         alert('hi');
      }); 
   });
</script>

Answer 7

1. make sure jQuery is loaded
2. use the latest jQuery library
3. check the error console (using chrome developer tools or firebug for firefox
4. try changing your jQuery to

code:

$(function(){
    $("#submitShout").click(function(e) {  
       e.preventDefault();
       alert('hi');
       return false;
   }); 
});

Answer 8

Try this

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $("#submitShout").click(function(event) {  
      alert('hi');
      event.preventDefault();
      });  
    });
      </script>