jQuery works on JSFiddle but not locally

Question

I wrote a simple program to see if jQuery was working locally, turns out it was not. In this program hovering over the red box changes the box with no color below it to green.

Here is the JSFiddle: http://jsfiddle.net/sBk3M/495/

Here is the code locally (it doesn't work).

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<style type="text/css">
    .hoverbox {
        background-color:red;
        width:20px;
        height:20px;
    }

    .showbox {
        width:20px;
        height:20px;
    }
</style>

<script type="text/javascript">

    $('.hoverbox').hover(function() {
        $('.showbox').css("background-color", "green");
    });

</script>

</head>

<body>
    <div class="hoverbox">
    </div>

    <div class="showbox">
    </div>

</body>


</html>

You need to use [dom ready handler](http://learn.jquery.com/using-jquery-core/document-ready/) as your script is executed before the target element is added to the dom... — Arun P Johny, Jan 21 '15 at 04:18
In jsfiddle the script is by default added in a `window.onload` handler... see the second dropdown in the left side panel(under `Frameworks & Extension`) — Arun P Johny, Jan 21 '15 at 04:19
@ArunPJohny Thank you very much, totally forgot to add that. — Brad Mitchell, Jan 21 '15 at 04:22
see [not working](http://jsfiddle.net/arunpjohny/sBk3M/496/) and [working](http://jsfiddle.net/arunpjohny/sBk3M/497/) — Arun P Johny, Jan 21 '15 at 04:22
I recommend to read the [**jQuery tutorial**](http://learn.jquery.com/about-jquery/how-jquery-works/). — Felix Kling, Jan 21 '15 at 04:23
@FelixKling is there a canonical question for dom ready issues.... — Arun P Johny, Jan 21 '15 at 04:25
@ArunPJohny: http://stackoverflow.com/q/14028959/218196 (I guess) — Felix Kling, Jan 21 '15 at 04:25

score 1 · Answer 1 · answered Jan 21 '15 at 04:21

1

Put this code

$(function(){
     $('.hoverbox').hover(function() {
            $('.showbox').css("background-color", "green");
        });

    });

answered Jan 21 '15 at 04:21

vaibhav kulkarni

1,277
11
19

score 1 · Answer 2 · answered Jan 21 '15 at 04:22

1

You can use like below :

$(document).ready(function(){
      $('.hoverbox').hover(function() {
          $('.showbox').css("background-color", "green");
      });
});

Reference for using $(document).ready() is jQuery Dom Ready

answered Jan 21 '15 at 04:22

Rajasekhar

509
1
4
14

jQuery works on JSFiddle but not locally

2 Answers2