Jump to content

Simple jQuery question

studsm

By studsm
in JavaScript

 Share

Recommended Posts

studsm Newbie

studsm

Posted
Posted

I just recently started using jQuery because it seems like its going to make my life much easier. I was just messing around with the very first example that w3schoos tutorials give and I was coming across what seems to me to be major issues. If anyone can shed some like on why this is happening I would love to know so that I dont waist hours in the future trying to figure out why my code isn't working when its simply in the wrong place.

The first example they gave is this.

 

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Which worked great of course, I then switched the <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> to this <script src ="jquery-1.11.3.min.js"></script> and that worked great to.
Now I started testing it with a seperate .js file and the file already had a couple of functions that I had written on it. When I placed the jquery code at the very top of the page it worked fine and the <p>'s all dissapeared when clicked on. but if i placed the jquery code anywhere underneath any of my functions it didn't work at all. I just want to know why this is and how I can avoid placing the code in the wrong place, why it was an issue etc... any light you can shed on the reasoning would be great. I'll post below what I mean if you want to see.
And i'll make the jquery code red so you can see where i put it
This works fine!
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
var text = "<table class = 'BSGrid'>";
document.getElementById("grid").innerHTML = generateArray();
function generateGrid(row, col)
{
var cells = 0;
for (var j = 0; j < row; j++)
{
text += "<tr>";
for (var i = 0; i < col; i++)
{
text += "<td class = 'cells'><div id = 'myTableId" + cells + "'></div> " + " " + "</td>";
cells++;
}
text += "</tr>";
}
text += "<br><br></table>";
document.getElementById("player1").innerHTML = text + "<br><br>";
document.getElementById("player2").innerHTML = text;
}
function loadGame()
{
var board = generateArray(board);
for (var i = 0; i < 100; i++) {
var getElement = document.getElementById("myTableId" + i);
if (board == 0) {
getElement.innerHTML = " ";
}
else if (board == 1) {
getElement.innerHTML = "S";
}
else if (board == 2) {
getElement.innerHTML = "X";
}
else
getElement.innerHTML = "O";
}
}
This Doesn't work
var text = "<table class = 'BSGrid'>";
document.getElementById("grid").innerHTML = generateArray();
function generateGrid(row, col)
{
var cells = 0;
for (var j = 0; j < row; j++)
{
text += "<tr>";
for (var i = 0; i < col; i++)
{
text += "<td class = 'cells'><div id = 'myTableId" + cells + "'></div> " + " " + "</td>";
cells++;
}
text += "</tr>";
}
text += "<br><br></table>";
document.getElementById("player1").innerHTML = text + "<br><br>";
document.getElementById("player2").innerHTML = text;
}
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
function loadGame()
{
var board = generateArray(board);
for (var i = 0; i < 100; i++) {
var getElement = document.getElementById("myTableId" + i);
if (board == 0) {
getElement.innerHTML = " ";
}
else if (board == 1) {
getElement.innerHTML = "S";
}
else if (board == 2) {
getElement.innerHTML = "X";
}
else
getElement.innerHTML = "O";
}
}
And this doesn't work either
var text = "<table class = 'BSGrid'>";
document.getElementById("grid").innerHTML = generateArray();
function generateGrid(row, col)
{
var cells = 0;
for (var j = 0; j < row; j++)
{
text += "<tr>";
for (var i = 0; i < col; i++)
{
text += "<td class = 'cells'><div id = 'myTableId" + cells + "'></div> " + " " + "</td>";
cells++;
}
text += "</tr>";
}
text += "<br><br></table>";
document.getElementById("player1").innerHTML = text + "<br><br>";
document.getElementById("player2").innerHTML = text;
}
function loadGame()
{
var board = generateArray(board);
for (var i = 0; i < 100; i++) {
var getElement = document.getElementById("myTableId" + i);
if (board == 0) {
getElement.innerHTML = " ";
}
else if (board == 1) {
getElement.innerHTML = "S";
}
else if (board == 2) {
getElement.innerHTML = "X";
}
else
getElement.innerHTML = "O";
}
}
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Did you clear cache/history? It will store original jquery file, paragraphs? What paragraphs? I can't see any to apply hide() to.The click event function will only work on paragraphs that exist at page load, any paragraphs created after that will not have click function applied unless you use jQuery .on() which will work in both scenarios.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...