After a refresh, jQuery's mousenter event is not functioning

Question

After a refresh, jQuery's mousenter event is not functioning

I am currently working on a fun project called Etch-a-Sketch for The Odin Project, and I have a jquery grid that can be redrawn with the click of a button.

Initially, the grid allows the user to choose the size and then draw on it using .mouseenter. However, after clicking the reset button, the drawing functionality seems to break. I'm puzzled as to what might be causing this issue.

To view the project in action, you can check out my jsfiddle here: https://jsfiddle.net/davidtaylorjr/cLcbxmnb/14/

Here is a snippet of the HTML:

<div class="grid_controls">
   <button class="clear button">Clear and Redraw</button>
</div>
<div class="container"></div>

And the CSS:

.grid_controls {
  text-align: center;
}

.button {
  position: absolute;
  top: 50%;
}

.box {
    margin:0;
    border:1px solid lightblue;
    box-sizing:border-box;
    float:left;
}

.container{
    padding:5px;
}

/* Rest of the CSS styling */

Lastly, here is the Javascript part of the project:

$(function(){

    // Functions and event handlers

})();

javascript jquery html css

Answer 1

Answer №1

To properly handle events for dynamically added elements, it is recommended to utilize the event delegation syntax provided by the .on() method

$(document).on('mouseenter', ".box", function() {
    $(this).addClass('black');
});

Check out this jsFiddle example

Answer 2

To properly handle events for dynamically added elements, it is recommended to utilize the event delegation syntax provided by the .on() method

$(document).on('mouseenter', ".box", function() {
    $(this).addClass('black');
});

Check out this jsFiddle example

Answer 3

Answer №2

When you redraw the box, the <code>mouseenter

event will not be triggered anymore.

To solve this issue, you can use the .container to delegate the event.

$(".container").on('mouseenter', '.box', function() {
  $(this).addClass('black');
});

For more information, you can refer to

.on( events [, selector ] [, data ], handler )

Answer 4

When you redraw the box, the <code>mouseenter

event will not be triggered anymore.

To solve this issue, you can use the .container to delegate the event.

$(".container").on('mouseenter', '.box', function() {
  $(this).addClass('black');
});

For more information, you can refer to

.on( events [, selector ] [, data ], handler )

Answer 5

Answer №3

Issue arises when the event is not inserted into the DOM during the redraw process. Insert this

//Activate drawing boxes on hover
$(".box").mouseenter(function() {
  $(this).addClass('black');
});

within the drawboxes function

     function drawBoxes(){
            var gridWidthInBoxes = prompt("Enter the width of the grid in boxes?");
            //Clear existing boxes and redraw
            $('.box').remove();
            for(var i = 0; i < (gridWidthInBoxes * gridWidthInBoxes) ; i++){
                $(".container").append("<div class='box'></div>");
            }
            //Apply styles to the newly drawn boxes
            restyle(gridWidthInBoxes);
//inserted here
        $(".box").mouseenter(function() {
          $(this).addClass('black');
        });
    }

Answer 6

Issue arises when the event is not inserted into the DOM during the redraw process. Insert this

//Activate drawing boxes on hover
$(".box").mouseenter(function() {
  $(this).addClass('black');
});

within the drawboxes function

     function drawBoxes(){
            var gridWidthInBoxes = prompt("Enter the width of the grid in boxes?");
            //Clear existing boxes and redraw
            $('.box').remove();
            for(var i = 0; i < (gridWidthInBoxes * gridWidthInBoxes) ; i++){
                $(".container").append("<div class='box'></div>");
            }
            //Apply styles to the newly drawn boxes
            restyle(gridWidthInBoxes);
//inserted here
        $(".box").mouseenter(function() {
          $(this).addClass('black');
        });
    }

Answer 7

Answer №4

Give this a try, it can be beneficial for you.

  $(function() {
    //Calling the original function
    drawBoxes();

    //Drawing .box div elements
    function drawBoxes() {
      var gridWidthInBoxes = prompt("Enter the width of the grid in boxes:");
      //Removing existing boxes and redrawing
      //$('.box').remove();
      $(".container").empty();
      for (var i = 0; i < (gridWidthInBoxes * gridWidthInBoxes); i++) {
        $(".container").append("<div class='box'></div>");
      }
      //Restyling the boxes after drawing
      restyle(gridWidthInBoxes);
    }

    //Styling .box divs with the correct width
    function restyle(numberofBoxes) {
      //Setting width and height css values for '.box' divs
      $('.box').css('width', (100 / numberofBoxes) + '%');
      $('.box').css('height', (100 / numberofBoxes) + '%');
    }

    //Button click event handler
    $("button").on('click', function() {
      drawBoxes();
    });

    //Hover effect to draw boxes
    $(".container").on('mouseenter', '.box', function() {
      $(this).addClass('black');
    });

  });

.grid_controls {
  text-align: center;
}
.button {
  position: absolute;
  top: 50%;
}
.box {
  margin: 0;
  border: 1px solid lightblue;
  box-sizing: border-box;
  float: left;
}
.container {
  padding: 5px;
}
/*=================
General
=================*/

body {
  background: white;
}
/*=================
Sketchpad Holder
=================*/

.container {
  width: 500px;
  height: 400px;
  background-color: none;
  overflow: hidden;
  margin: auto;
  position: relative;
  top: 20px;
}
.box {
  background: white;
  position: relative;
}
.clear {
  position: relative;
  margin: auto;
  text-align: center;
}
.box.black {
  background-color: #000;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<div class="grid_controls">

  <button class="clear button">Clear and Redraw</button>
</div>
<div class="container">
</div>

Answer 8

Give this a try, it can be beneficial for you.

  $(function() {
    //Calling the original function
    drawBoxes();

    //Drawing .box div elements
    function drawBoxes() {
      var gridWidthInBoxes = prompt("Enter the width of the grid in boxes:");
      //Removing existing boxes and redrawing
      //$('.box').remove();
      $(".container").empty();
      for (var i = 0; i < (gridWidthInBoxes * gridWidthInBoxes); i++) {
        $(".container").append("<div class='box'></div>");
      }
      //Restyling the boxes after drawing
      restyle(gridWidthInBoxes);
    }

    //Styling .box divs with the correct width
    function restyle(numberofBoxes) {
      //Setting width and height css values for '.box' divs
      $('.box').css('width', (100 / numberofBoxes) + '%');
      $('.box').css('height', (100 / numberofBoxes) + '%');
    }

    //Button click event handler
    $("button").on('click', function() {
      drawBoxes();
    });

    //Hover effect to draw boxes
    $(".container").on('mouseenter', '.box', function() {
      $(this).addClass('black');
    });

  });

.grid_controls {
  text-align: center;
}
.button {
  position: absolute;
  top: 50%;
}
.box {
  margin: 0;
  border: 1px solid lightblue;
  box-sizing: border-box;
  float: left;
}
.container {
  padding: 5px;
}
/*=================
General
=================*/

body {
  background: white;
}
/*=================
Sketchpad Holder
=================*/

.container {
  width: 500px;
  height: 400px;
  background-color: none;
  overflow: hidden;
  margin: auto;
  position: relative;
  top: 20px;
}
.box {
  background: white;
  position: relative;
}
.clear {
  position: relative;
  margin: auto;
  text-align: center;
}
.box.black {
  background-color: #000;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<div class="grid_controls">

  <button class="clear button">Clear and Redraw</button>
</div>
<div class="container">
</div>

After a refresh, jQuery's mousenter event is not functioning

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Assigning active classes based on the href attributes of child <a> tags

Utilize JavaScript to parse HTML content retrieved through AJAX requests

What is the best way to retrieve data from PHP and format it into JSON for use in my jQuery script?

I am having trouble printing because of document.write

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

Error: Attempting to access the 'url' property of an undefined variable, despite specifically checking for its undefined status

Edit: "Submit a binary file with just JavaScript"

The navigation bar extends beyond the container

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

pass the HTML output back to Python

Tips for Showing Certain Slides When the Page Loads

What are some ways to implement querySelectorAll in conjunction with htmx?

does not output any console log statements

Why is the 'a' element not clickable after the AJAX complete function has executed in JavaScript?

Creating a Click Counter with jQuery 2.0.1/2.0.2: A Step-by-Step Guide

Express.js does not display console.log messages while routing

Exploring the power of tRPC for creating dynamic routes in NextJs

ReactJS integration issue with Material Design Lite (import/require problem)

Is there a way to make a selected option stay selected in vue.js 2?

Creating a color icon for StackExchange using HTML