Mixing
Click not registering
I've added a bunch of buttons using Jquery, all of them in the same class, and I'm trying to have them do something when clicked. I have a simple on click function for them right now that just logs the word "clicked" to the console, but it is not registering any of my clicks. Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Minesweeper</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="dimensions">
Width: <input type="Width" id="width"><br/>
Height: <input type="Height" id="height"><br/>
<button type="button" id="new-game" onclick="newGame()">Create</button>
</div>
<div id="board"></div>
</body>
</html>
Javascript:
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (i = 1; i <= rows; i++) {
for (j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
q = Math.floor(Math.random() * 2);
if (q == 0) {
numBombs += 1;
}
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = ' + q + '></button>');
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = 1 ></button>');
}
}
$("#board").append("<br/>");
}
$(".tile").width(100/cols);
$(".tile").height(100/rows);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
}
$(".tile").on('click', function() {
$(this).css("color", "black");
console.log("clicked");
});
function boardClear() {
$("#board").empty();
}
You can see that my $(".tile") on click function has the word "clicked" logged to console, but that never happens when I click on one.
I have tried wrapping the on click function in $(document).ready(function(){}), but it still does not work.
javascript jquery
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
|
show 3 more comments
I've added a bunch of buttons using Jquery, all of them in the same class, and I'm trying to have them do something when clicked. I have a simple on click function for them right now that just logs the word "clicked" to the console, but it is not registering any of my clicks. Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Minesweeper</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="dimensions">
Width: <input type="Width" id="width"><br/>
Height: <input type="Height" id="height"><br/>
<button type="button" id="new-game" onclick="newGame()">Create</button>
</div>
<div id="board"></div>
</body>
</html>
Javascript:
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (i = 1; i <= rows; i++) {
for (j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
q = Math.floor(Math.random() * 2);
if (q == 0) {
numBombs += 1;
}
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = ' + q + '></button>');
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = 1 ></button>');
}
}
$("#board").append("<br/>");
}
$(".tile").width(100/cols);
$(".tile").height(100/rows);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
}
$(".tile").on('click', function() {
$(this).css("color", "black");
console.log("clicked");
});
function boardClear() {
$("#board").empty();
}
You can see that my $(".tile") on click function has the word "clicked" logged to console, but that never happens when I click on one.
I have tried wrapping the on click function in $(document).ready(function(){}), but it still does not work.
javascript jquery
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
2
$("tile")But you do not have<tile>s anywhere, maybe you want$('.tile')(also use event delegation instead)
– CertainPerformance
Nov 19 '18 at 23:46
Not sure how that happened, since I had it as.tilebefore, but that does not fix the problem.
– Mdomin45
Nov 19 '18 at 23:48
1
(also use event delegation instead), did you try that too?
– CertainPerformance
Nov 19 '18 at 23:49
Move your jquery and script tag out theheadto just above the closingbodytag.
– Ashley Brown
Nov 19 '18 at 23:50
@AshleyBrown That doesn't fix the problem.
– Mdomin45
Nov 19 '18 at 23:51
|
show 3 more comments
I've added a bunch of buttons using Jquery, all of them in the same class, and I'm trying to have them do something when clicked. I have a simple on click function for them right now that just logs the word "clicked" to the console, but it is not registering any of my clicks. Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Minesweeper</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="dimensions">
Width: <input type="Width" id="width"><br/>
Height: <input type="Height" id="height"><br/>
<button type="button" id="new-game" onclick="newGame()">Create</button>
</div>
<div id="board"></div>
</body>
</html>
Javascript:
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (i = 1; i <= rows; i++) {
for (j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
q = Math.floor(Math.random() * 2);
if (q == 0) {
numBombs += 1;
}
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = ' + q + '></button>');
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = 1 ></button>');
}
}
$("#board").append("<br/>");
}
$(".tile").width(100/cols);
$(".tile").height(100/rows);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
}
$(".tile").on('click', function() {
$(this).css("color", "black");
console.log("clicked");
});
function boardClear() {
$("#board").empty();
}
You can see that my $(".tile") on click function has the word "clicked" logged to console, but that never happens when I click on one.
I have tried wrapping the on click function in $(document).ready(function(){}), but it still does not work.
javascript jquery
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
I've added a bunch of buttons using Jquery, all of them in the same class, and I'm trying to have them do something when clicked. I have a simple on click function for them right now that just logs the word "clicked" to the console, but it is not registering any of my clicks. Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Minesweeper</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="dimensions">
Width: <input type="Width" id="width"><br/>
Height: <input type="Height" id="height"><br/>
<button type="button" id="new-game" onclick="newGame()">Create</button>
</div>
<div id="board"></div>
</body>
</html>
Javascript:
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (i = 1; i <= rows; i++) {
for (j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
q = Math.floor(Math.random() * 2);
if (q == 0) {
numBombs += 1;
}
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = ' + q + '></button>');
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = 1 ></button>');
}
}
$("#board").append("<br/>");
}
$(".tile").width(100/cols);
$(".tile").height(100/rows);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
}
$(".tile").on('click', function() {
$(this).css("color", "black");
console.log("clicked");
});
function boardClear() {
$("#board").empty();
}
You can see that my $(".tile") on click function has the word "clicked" logged to console, but that never happens when I click on one.
I have tried wrapping the on click function in $(document).ready(function(){}), but it still does not work.
javascript jquery
javascript jquery
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
edited Nov 19 '18 at 23:48
Mdomin45
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
asked Nov 19 '18 at 23:45
Mdomin45Mdomin45
12728
12728
2
$("tile")But you do not have<tile>s anywhere, maybe you want$('.tile')(also use event delegation instead)
– CertainPerformance
Nov 19 '18 at 23:46
Not sure how that happened, since I had it as.tilebefore, but that does not fix the problem.
– Mdomin45
Nov 19 '18 at 23:48
1
(also use event delegation instead), did you try that too?
– CertainPerformance
Nov 19 '18 at 23:49
Move your jquery and script tag out theheadto just above the closingbodytag.
– Ashley Brown
Nov 19 '18 at 23:50
@AshleyBrown That doesn't fix the problem.
– Mdomin45
Nov 19 '18 at 23:51
|
show 3 more comments
2
$("tile")But you do not have<tile>s anywhere, maybe you want$('.tile')(also use event delegation instead)
– CertainPerformance
Nov 19 '18 at 23:46
Not sure how that happened, since I had it as.tilebefore, but that does not fix the problem.
– Mdomin45
Nov 19 '18 at 23:48
1
(also use event delegation instead), did you try that too?
– CertainPerformance
Nov 19 '18 at 23:49
Move your jquery and script tag out theheadto just above the closingbodytag.
– Ashley Brown
Nov 19 '18 at 23:50
@AshleyBrown That doesn't fix the problem.
– Mdomin45
Nov 19 '18 at 23:51
2
2
$("tile") But you do not have <tile>s anywhere, maybe you want $('.tile') (also use event delegation instead)– CertainPerformance
Nov 19 '18 at 23:46
$("tile") But you do not have <tile>s anywhere, maybe you want $('.tile') (also use event delegation instead)– CertainPerformance
Nov 19 '18 at 23:46
Not sure how that happened, since I had it as
.tile before, but that does not fix the problem.– Mdomin45
Nov 19 '18 at 23:48
Not sure how that happened, since I had it as
.tile before, but that does not fix the problem.– Mdomin45
Nov 19 '18 at 23:48
1
1
(also use event delegation instead), did you try that too?– CertainPerformance
Nov 19 '18 at 23:49
(also use event delegation instead), did you try that too?– CertainPerformance
Nov 19 '18 at 23:49
Move your jquery and script tag out the
head to just above the closing body tag.– Ashley Brown
Nov 19 '18 at 23:50
Move your jquery and script tag out the
head to just above the closing body tag.– Ashley Brown
Nov 19 '18 at 23:50
@AshleyBrown That doesn't fix the problem.
– Mdomin45
Nov 19 '18 at 23:51
@AshleyBrown That doesn't fix the problem.
– Mdomin45
Nov 19 '18 at 23:51
|
show 3 more comments
1 Answer
1
active
oldest
votes
You need to use
$(document).on('click', '.tile', function() {
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.
I made the change in your HTML and tested it and works as expected. Cheers!
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
1
Important to note, this method is known as event delegation.
– Tyler Roper
Nov 20 '18 at 1:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384254%2fclick-not-registering%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to use
$(document).on('click', '.tile', function() {
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.
I made the change in your HTML and tested it and works as expected. Cheers!
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
1
Important to note, this method is known as event delegation.
– Tyler Roper
Nov 20 '18 at 1:13
add a comment |
You need to use
$(document).on('click', '.tile', function() {
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.
I made the change in your HTML and tested it and works as expected. Cheers!
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
1
Important to note, this method is known as event delegation.
– Tyler Roper
Nov 20 '18 at 1:13
add a comment |
You need to use
$(document).on('click', '.tile', function() {
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.
I made the change in your HTML and tested it and works as expected. Cheers!
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
You need to use
$(document).on('click', '.tile', function() {
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.
I made the change in your HTML and tested it and works as expected. Cheers!
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
edited Nov 20 '18 at 0:10
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
answered Nov 20 '18 at 0:01
Patrick SimardPatrick Simard
1,05911024
1,05911024
1
Important to note, this method is known as event delegation.
– Tyler Roper
Nov 20 '18 at 1:13
add a comment |
1
Important to note, this method is known as event delegation.
– Tyler Roper
Nov 20 '18 at 1:13
1
1
Important to note, this method is known as event delegation.
– Tyler Roper
Nov 20 '18 at 1:13
Important to note, this method is known as event delegation.
– Tyler Roper
Nov 20 '18 at 1:13
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384254%2fclick-not-registering%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
$("tile")But you do not have<tile>s anywhere, maybe you want$('.tile')(also use event delegation instead)– CertainPerformance
Nov 19 '18 at 23:46
Not sure how that happened, since I had it as
.tilebefore, but that does not fix the problem.– Mdomin45
Nov 19 '18 at 23:48
1
(also use event delegation instead), did you try that too?– CertainPerformance
Nov 19 '18 at 23:49
Move your jquery and script tag out the
headto just above the closingbodytag.– Ashley Brown
Nov 19 '18 at 23:50
@AshleyBrown That doesn't fix the problem.
– Mdomin45
Nov 19 '18 at 23:51