JQuery work on JSFiddle but not on my site.

Question

I have this problem: I've written a JQuery script that works on JSFiddle but it doesn't work on my site.

Here is the code [JQUERY]

$("i#ch1").click(function () {
    $('div#change-bg').removeClass();
    //remove classes so it can set for the clicked one "fa fa-circle" and for the other "fa fa-circle-o"
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();

    $('div#change-bg').addClass('bg1');
    //add classes

    $('i#ch1').addClass('fa fa-circle');
    $('i#ch2').addClass('fa fa-circle-o');
    $('i#ch3').addClass('fa fa-circle-o');
    $('i#ch4').addClass('fa fa-circle-o');

});




$("i#ch2").click(function () {
    $('div#change-bg').removeClass();
    $('div#change-bg').addClass('bg2');
    //remove classes
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();
    //add classes
    $('i#ch1').addClass('fa fa-circle-o');
    $('i#ch2').addClass('fa fa-circle');
    $('i#ch3').addClass('fa fa-circle-o');
    $('i#ch4').addClass('fa fa-circle-o');
});




$("i#ch3").click(function () {
    $('div#change-bg').removeClass();
    $('div#change-bg').addClass('bg3');
    //remove classes
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();
    //add classes
    $('i#ch1').addClass('fa fa-circle-o');
    $('i#ch2').addClass('fa fa-circle-o');
    $('i#ch3').addClass('fa fa-circle');
    $('i#ch4').addClass('fa fa-circle-o');
}); 



$("#ch4").click(function () {
    $('div#change-bg').removeClass();
    $('div#change-bg').addClass('bg4');
    //remove classes
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();
    //add classes
    $('i#ch1').addClass('fa fa-circle-o');
    $('i#ch2').addClass('fa fa-circle-o');
    $('i#ch3').addClass('fa fa-circle-o');
    $('i#ch4').addClass('fa fa-circle');
});             


//fa fa-dot-circle-o on mouse over
//fa fa-circle-o on mouse out


$("i#ch1").mouseover(function () {
    $("i#ch1").removeClass();
    $("i#ch1").addClass('fa fa-dot-circle-o');
});
$("i#ch1").mouseout(function () {
    $("i#ch1").removeClass();
    $("i#ch1").addClass('fa fa-circle-o');
});



$("i#ch2").mouseover(function () {
    $("i#ch2").removeClass();
    $("i#ch2").addClass('fa fa-dot-circle-o');
});
$("i#ch2").mouseout(function () {
    $("i#ch2").removeClass();
    $("i#ch2").addClass('fa fa-circle-o');
});


$("i#ch3").mouseover(function () {
    $("i#ch3").removeClass();
    $("i#ch3").addClass('fa fa-dot-circle-o');
});
$("i#ch3").mouseout(function () {
    $("i#ch3").removeClass();
    $("i#ch3").addClass('fa fa-circle-o');
});


$("i#ch4").mouseover(function () {
    $("i#ch4").removeClass();
    $("i#ch4").addClass('fa fa-dot-circle-o');
});
$("i#ch4").mouseout(function () {
    $("i#ch4").removeClass();
    $("i#ch4").addClass('fa fa-circle-o');
});


//by Niccolò Agnoletti

[script_tags_in_html_head]

<!--scripts-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.niccow3.site11.com/V2/javate.js"></script>

[HTML]

<div id="change-bg" class="bg1">
<center>
        <div id="bg-buttons">
            <i class ="fa fa-circle" id="ch1"> </i>
            <i class ="fa fa-circle-o" id="ch2"> </i>
            <i class ="fa fa-circle-o" id="ch3"> </i>
            <i class ="fa fa-circle-o" id="ch4"> </i>
        </div>
            </center>
</div>

[CSS]

.bg1{
    width:640px;
    height:480px;
    background: url('http://lorempixel.com/640/480');
    }
.bg2{
    width:640px;
    height:480px;
    background: url('http://lorempixel.com/640/480/sports/');
    }
.bg3{
     width:640px;
    height:480px;
    background: url('http://lorempixel.com/640/480/sports/This-is-sporty/');
    }
.bg4{
    width:640px;
    height:480px;
    background: url('http://dummyimage.com/640x4:3');
    }


#bg-buttons{display: inline;}
#ch1, #ch2, #ch3,#ch4 {color: orange; background:black;}

---

And I've also another problem: The table that should be on the bottom is just under the div on the top. Can someone help?

Answer 1

1. You import jquery twice:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Remove one of them as they are conflicting.

2. You should wrap all your javascript code like this:

$(function(){
    // Your js code here
};

This will cause the code to be executed after page is completely loaded. Otherwise you try to operate on incomplete DOM tree.
$(document).ready() solution from other answers will do the same but mine is shorter and preferred way.

Answer 2

Inside of your file http://www.niccow3.site11.com/V2/javate.js you need to make sure that your code is inside of jquery's document ready event. You do it at the bottom of the file, but the other content needs it as well. The reason the code works on jsFiddle and not on your site is that you more than likely selected the "onload" handler for the code section in the left hand panel (it is default). However, omitting this on your site meant that the DOM wasn't ready when the jquery executed. When that happens, no results return for the selectors and jquery silently fails to assign the event handlers.

So this

$("i#ch1").click(function () {
$('div#change-bg').removeClass();
//remove classes so it can set for the clicked one "fa fa-circle" and for the other "fa fa-circle-o"
$('i#ch1').removeClass();
$('i#ch2').removeClass();
$('i#ch3').removeClass();
$('i#ch4').removeClass();

$('div#change-bg').addClass('bg1');
//add classes

$('i#ch1').addClass('fa fa-circle');
$('i#ch2').addClass('fa fa-circle-o');
$('i#ch3').addClass('fa fa-circle-o');
$('i#ch4').addClass('fa fa-circle-o');

});

should be this

$(function(){
$("i#ch1").click(function () {
$('div#change-bg').removeClass();
//remove classes so it can set for the clicked one "fa fa-circle" and for the other "fa fa-circle-o"
$('i#ch1').removeClass();
$('i#ch2').removeClass();
$('i#ch3').removeClass();
$('i#ch4').removeClass();

$('div#change-bg').addClass('bg1');
//add classes

$('i#ch1').addClass('fa fa-circle');
$('i#ch2').addClass('fa fa-circle-o');
$('i#ch3').addClass('fa fa-circle-o');
$('i#ch4').addClass('fa fa-circle-o');

});
});

And the same for the next dozen code blocks.

Answer 3

You should wrap your code in $(document).ready(function(){}) or $(function(){});

JSFiddle automatically sets the option onLoad, but you'll have to manually include it in your code to make it work.

The reason why your code might not be working is because you might be trying to access elements, even before they existed.