Not able to debug this jQuery

Question

If you look at my sandbox site englishgodsandbox, after about 8 seconds, a drop down menu with a button "confirm" loads in the middle of the page. If you click the "confirm" button, the background image for the page should change according to the last few lines of code below.

However, the image is not changing...Can anyone tell me why?

$(document).ready(function(){ 
 $(init); 
}); 
function init() {
 cloudshow();
}
function cloudshow() {
 $("#intro").fadeIn(1000, function(){
 $("#intro2").fadeIn(1000, function(){
 $("#cloud1").fadeIn(2000, function(){
 $("#cloud2, #cloud5").fadeIn(2000, function(){
 $("#cloud3, #cloud4, #cloud6").fadeIn(2000, function(){
 $("#message").fadeIn(1000, function() {
 $("#contactform").fadeIn(1000)
 }); 
 });
 });
 });
 });
 });
};
var img1 = "url('/wp-content/themes/thesis_18/custom/images/map.jpg') repeat";
$(".submit").click(function(){
 $("body.custom").css({background: img1});
});

• nickf: what is the purpose of the $ in this line: $(init); ?
• Leahcim: I'm not sure, I got that code from a tutorial.
• nickf: If you pass a function to the jQuery function, it is equivalent to $(document).ready(...), so you could change that line to init(); or, remove the $(document).ready call altogether.
• Leahcim: Thanks. are you suggesting that might be the source of my problem, or is just a general best practice?
• nickf: Just general best practice, sorry (hence the comment instead of an answer). :)

Answer 1

Ok, I think I see the problem.

At the time that the last three lines there are executed, the .submit button isn't actually on the page yet.

Move those lines into your init() function and give that a try.

The init function is only being executed after the document is ready, therefore the button should be there at that time.

• Leahcim: thank you. 3 people answered, so I have to flip a coin to see who gets accepted answer. You lost. sorry, but thank you so much.
• nickf: @Michael -- I want one of your three-sided coins

Answer 2

In order to

$(".submit").click(function(){
 $("body.custom").css({background: img1});
});

work you should ensure that $(".submit") exists, so try:

var img1 = "url('/wp-content/themes/thesis_18/custom/images/map.jpg') repeat";
$(document).ready(function(){ 
 init(); 
 $(".submit").click(function(){
 $("body.custom").css({background: img1});
 });
}); 

• Leahcim: thank you. 3 people answered, so I have to flip a coin to see who gets accepted answer. You lost. sorry, but thank you so much.

Answer 3

The problem is that you reference the $(".submit") elemets before they are parsed into the DOM. Putting them in a reday event, or at the end of body would solve your problem.

$(function() {
 $(".submit").click(function(){
 $("body.custom").css({background: img1});
 });
});