I have to click twice to activate function using jQuery <p>I am having a lot of trouble with jQuery. I have to click twice on a button to make the page disappear. I have tried importing both versions of jQuery and I tried to use the fadeOut() function on different elements, but nothing has prevailed. It works the second time I click, but never the first. This is a recurring problem, and I need to know how it can be fixed. Here is my code:</p> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;h1&gt;CSS3 Buttons Showcase&lt;/h1&gt; &lt;a href="#" id="btn-1" onclick="fadeBg()"&gt;Click Me!&lt;/a&gt; &lt;/body&gt; </code></pre> <p>JavaScript:</p> <pre><code>function fadeBg(){ $("#btn-1").click(function(){ $("body").fadeOut(1000); }) } </code></pre>