Unresponsive elements after button click
Question
Background:
I started Javascript the other day and built this sketch pad:
http://frankpeelen.github.io/sketch-pad/
following alongside the instructions on:
http://www.theodinproject.com/web-development-101/javascript-and-jquery
Problem:
It's basically finished, and works fine except for when creating a new grid with the "New" button. All of a sudden the 'squares' stop responding to 'hover' events. I've searched, but have been unable to find any similar problems. Any ideas?
Code:
$(document).ready(function() { var build = function(h, w) { var height = h; var width = w; //Loop through height to create rows for (i = 1; i <= height; i++) { $("#sketchpadcontainer").append("<div class='row'></div>"); //Loop through width to create divs in each row for (j = 1; j <= width; j++) { $(".row:last-child").append("<div class='sqrcontainer'><div class='square'></div></div>"); } } }; //Build default 16x16 grid build(16, 16); $("button").click(function() { var size = parseInt(prompt("How many squares per side would you like? Please enter a number.")); //In case the number entered > 50 if (size > 50) { $(".row").remove(); build(50, 50); alert("The number you entered was too large. The number 50 has been used instead.") } //In case a non-number is entered else if (isNaN(size)) { $(".row").remove(); build(16, 16); alert("You didn't enter a number. The default of 16 has been used.") } //In case a number <= 50 is entered else { $(".row").remove(); build(size, size); } }) $(".square").hover( //Mouse in function () { $(this).css("background-color", "blue"); }, //Mouse out function () {} ); });
html, body, #sitecontainer { height: 100%; width: 100%; margin: 0px; } #sketchpadcontainer { } button { display: block; margin: 0 auto; margin-top: 2em; margin-bottom: 1em; } #sketchpadcontainer { } .row { text-align: center; } .sqrcontainer { height: 1.5em; width: 1.5em; display: inline-block; } .square { width: 1em; height: 1em; margin: .1em; border-color: black; border-style: solid; border-radius: .1em; }
<!DOCTYPE html> <head> <title>Sketch Pad</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' src="js/javascript.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="sitecontainer"> <div id="buttoncontainer"> <button type="button">New</button> </div> <div id="sketchpadcontainer"> </div> </div> </body>
2 answers
solution1
0 2015-03-23 09:37:04
change $(".square").hover(
to $(document).on("hover" ,".square", function(){ . . . }) Ur problem in $(".square").hover( - work after $(document).ready , but after u appending new rows - document ready dont triggering, and ur elements have not events, and trigger .on work on every elems on page, even on dynamically added.
solution2
0 ACCPTED 2015-03-23 09:39:20
You are deleting the divs before the build method. That means the hover listeners will be deleted to. You have to add them to the .sqare elements again.
Just move
$(".square").hover(
//Mouse in
function () {
$(this).css("background-color", "blue");
},
//Mouse out
function () {} );
inside your build method
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.