Question

I’ve got a strange problem.

I’ve been using just javascript forever now, and I’m wanting to switch to jquery, so I’ve got the latest jquery loaded, and some things work, like replaceWith(), but any thing that animates won’t work. It’s a really strange problem, but I’m getting no errors in the console and I’m clueless what’s wrong…

The site’s code is really compressed and not easily readable, but please have a look and see if you see the issue. For instance, go to the page in the link and click the “Languages:” box on the left. What should happen is when you click the H3, the div #langlis which is set to display none by default, should show. But nothing’s happening.

The jQuery replaceWith works, that’s in use on the Virus scanning bit on the right, click to scan for viruses and you’ll see it working, so some jQuery stuff works, but not the simpler stuff. 🙁

http://filequake.com/download-itunes-x64/

Thanks.

Answer 1

When you call $("#langs_h3").click(function() {... a query is performed on the document and every #langs_h3 element found gets the event listener function that you are providing attached to the Click event (by the click() method of the $() object).

But, in your page, the H3 element you are looking for still does not exist by the time the interpreter reaches your Javascript code, because your code appears before the <h3> tag.

There are two things you can do. You could move your code to the bottom of the page, or you could keep it at the top but put it inside a function, and call jQuery() passing that function as an argument:

jQuery(function(){
  // your code here
  $("#langs_h3").click(function() { /* ... */ }
});

This second suggestion is common practice, and lets you keep all your javascript inside the
<header> section, wich is recommended. The jQuery function realizes you are passing a function and will not execute it right away, but rather store it and call it once the Document onLoad event occurs (similar to putting the code at the bottom of the page). The H3 element you are looking for will exist by then.