4

jQuery is not working in Firefox. It works fine in IE and Google chrome, but when I am trying to run my application in Mozilla Firefox jQuery is not working. Any guesses? Here is my piece of code

<!DOCTYPE HTML PUBLIC>
<html>
   <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
      <style>
         div{
         width:200px;
         height:100px;
         border:1px solid red;
         }
      </style>
   </head>
   <body>
      <div> One</div>
      <div>Two</div>
      <div>Three</div>
   </body>
   <script>
      $('div').click(function(){
       alert("Hello.....");
      });
   </script>
</html>
Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
Rama Rao M
  • 2,961
  • 11
  • 44
  • 64
  • 1
    http://jsfiddle.net/yVk53/ - works fine for me – Chris Aug 29 '12 at 08:55
  • 1
    @Chris Go and view the source of that jsFiddle (http://jsfiddle.net/yVk53/show/) and you'll see it actually wraps all of your code inside another `body` element, so it's not a fair test. – Ben Everard Aug 29 '12 at 08:58
  • 1
    Yeah..Its working for me from jsfiddle. But,if I open same application(same code that is saved in my deskop) in my brower,its not working.... – Rama Rao M Aug 29 '12 at 09:00

3 Answers3

9

you should use the dom ready event

$(document).ready(function(){
  $('div').click(function(){
   alert("Hello.....");
  });
});
lukenz
  • 139
  • 1
  • Yeah...You are right...I would make your answer as accepted one..But I have a doubt..I had written my script at end of the body, so it must be equivalent to document.ready() na!!! – Rama Rao M Aug 29 '12 at 09:05
  • @RamaRaoM did you read the other answers? It's probably because your script isn't in the body, but outside... – sp00m Aug 29 '12 at 09:18
  • 1
    @RamaRaoM: A script outside the `` and `` tags is automatically moved into ``. If you don't like the auto-correction then you should write valid HTML. – Wladimir Palant Aug 29 '12 at 10:48
3

Put your jquery Code inside document.ready.

 $(document).ready(function() {
  $('div').click(function(){
       alert("Hello.....");
      });

 });

Give your div a proper class.just like

<div class="clsDiv"> One</div>

amd call like this.

 $('.clsDiv').click(function(){
4b0
  • 21,981
  • 30
  • 95
  • 142
0

lukenz and Shree nailed it. JQUery event handlers for html elements must first be registered in $(document).ready().

pavan kumar
  • 408
  • 5
  • 19