Develop Reference

Why won't my jQuery references work? Am I referencing the script incorrectly?

I'm trying to write a click event for an arbitrary button on an html page. I'm referencing jQuery and the JavaScript file in the here:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/product-swap.js"></script>
and the button here:
<button class="btn">Click Me</button>
I'm really just trying to have an alert appear on the screen to test the references. JavaScript:
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Won't you appear, please!?");
});
When I click the button...nothing happens. Nothing appears in the log or in the console or in an alert window.
I know this is probably something arbitrary and stupid but I'm fairly new to JavaScript/jQuery and I'm racking my brain over this one.
Thanks!

try with this man:
$(document).ready(function(){
$('.btn').on('click', function() {
console.log("STUPID LOG");
// Reset the window object
delete window.alert;
alert('test');
});
});

Is the button after the script? If so then you can either move the button to before the script, or wrap the script in a
$(function(){ /* Code goes here */ });

Put your JQuery lines inside this:
$( document ).ready(function() {
//your code.
});

The HTML page isn't ready when you call the script, enclose your code with $(function(){...});, it will wait until the page is ready.
$(function(){
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Fantastic, I will appear!");
});
});
I also recommend you to put your script tags at the end of your HTML page, the render of visual elements will be faster.

u can try like this too
function myFunction() {
alert("I am an alert box!");
}
<button onclick="myFunction()">Click Me</button>

combine onLoad, onResize and onRefresh in jquery

I want a website to execute a certain jquery script (which allows me to stretch the height of a vertical menu to the height of my browser window) when the page loads and when it is resized.
So I have written a jquery of this kind:
jQuery(document).ready(function ($) {
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
});
My problem is that this code works well when somebody loads the page or when he resizes it, but it doesn't work when one hits the refresh button. How could I make the code work also in that case?
Thank you in advance for your help.

Try this:
var myFn = function() { console.log('hello world') };
jQuery(document).ready(function ($) {
myFn();
$(window).on('resize', function() {
myFn();
});
});

jQuery(document).ready(function ($) {
function Resize(){
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
}
});
call this Resize() whenever you need. Either on load or on click.

It turned out that the way I described in my own question was more than right. It worked perfectly well that way, even onRefresh. What was not making my script work properly was the fact that one of the variables I was using would change after the page had finished loading, so when I was hitting "refresh", it would give a different value than in the beginning.
So for every user of stackoverflow.com, please note that whenever you want to set an event onLoad, onResize AND onRefresh, the easiest and best possible way is:
jQuery(document).ready(function ($) {
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
});
In fact, what glortho was suggesting could work, but that was using another variable, and in my humble opinion, that would make the whole thing a little more redundant.
Thank you everybody for your help and for reading.

document.ready() function not executed, works in dev console

I'm trying to simulate a click in a tabbed div when the page loads.
To do this I use:
$(document).ready(function() {
$("#tab_inbox").click();
});
However, this doesn't seem to work, but when I enter this in the dev console on Google chrome, it does work..
$("#tab_inbox").click();
To show the tabs, I use this code:
$("#tab_inbox").click(function() {
$("#othertab").hide();
$("#tab_inbox").show();
});
Anybody knows what's wrong?

Try this:
$(document).ready(function() {
setTimeout(function () {
$("#tab_inbox").trigger('click'); //do work here
}, 2500);
});

I read in your comment that you're using show/hide techniques and I assume you need the click for an initial display option? If so, hide (or show) your element(s) specifically in the code rather than saying click to hide/show. So
$(document).ready(function() {
$("#tab_inbox").hide();
}
Or try core JavaScript and use
window.onload = function() {
// code here
}
window.onload waits until everything is loaded on your page, while jQuery's .ready() may fire before images and other media are loaded.

you can try making your own function with pure JS:
document.getElementById('triggerElement').addEventListener('click', funtction(e) {
document.getElementById('hideElement').style.display = 'none';
document.getElementById('showElement').style.display = 'block';
}, false);

How to detect if a page has fully rendered using jQuery?

When using $(document).ready(functioon(){alert("Loaded.")}); it pops up the alert box that says "Loaded." even before the page has fully loaded (in other words there're loading still going on like images).
Any thoughts?

$(window).on('load', function() {
//everything is loaded
});

Try out .load() instead.
$(document).load(function () {
alert('Loaded');
}
The load event is sent to an element when it and all sub-elements have been completely loaded.
http://api.jquery.com/load-event/

Using javascript
window.onload = function () { alert("loaded"); }

You can read more about it here.
https://github.com/codef0rmer/learn.jquery.com/blob/master/content/jquery-basics/document-ready.md

Any ideas as to why this jQuery does not work?

I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/

It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.

Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});

I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?