У меня есть сетка jquery, которую можно перерисовать после нажатия кнопки. Это для проекта Etch-a-Sketch для проекта Odin.

Код работает в первый раз и позволяет пользователю выбрать размер сетки, а затем нарисовать на .mouseenter. Однако, когда они нажимают кнопку для сброса, она больше не позволяет рисовать. Не уверен, что я делаю не так.

У меня есть jsfiddle для проекта по адресу https://jsfiddle.net/davidtaylorjr/cLcbxmnb/14/

Html:

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

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;
}


/*=================
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;
} 

Javascript:

$(function(){

    //Invoke original function
    drawBoxes();

    //Draw .box divs
    function drawBoxes(){
        var gridWidthInBoxes = prompt("Width of grid in boxes?");
        //Remove boxes and redraw
        $('.box').remove();
        for(var i = 0; i < (gridWidthInBoxes * gridWidthInBoxes) ; i++){
            $(".container").append("<div class='box'></div>");
        }
        //Restyle boxes after they have been drawn
        restyle(gridWidthInBoxes);
    }

    //Style .box divs with appropriate width
    function restyle(numberofBoxes){
        //Set width and height css value for '.box' divs
        $('.box').css('width', (100/numberofBoxes)+'%');
        $('.box').css('height', (100/numberofBoxes)+'%');
    }

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



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

})();
0
davidtaylorjr 11 Дек 2016 в 05:38

4 ответа

Лучший ответ

Событие mouseenter никогда не будет запущено, когда вы перерисовываете окно.

Вы будете использовать .container для делегирования события

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

Ссылка: .on( events [, selector ] [, data ], handler )

0
Fu Xu 11 Дек 2016 в 03:47

Попробуйте это, это поможет вам.

  $(function() {
    //Invoke original function
    drawBoxes();

    //Draw .box divs
    function drawBoxes() {
      var gridWidthInBoxes = prompt("Width of grid in boxes?");
      //Remove boxes and redraw
      //$('.box').remove();
      $(".container").empty();
      for (var i = 0; i < (gridWidthInBoxes * gridWidthInBoxes); i++) {
        $(".container").append("<div class='box'></div>");
      }
      //Restyle boxes after they have been drawn
      restyle(gridWidthInBoxes);
    }

    //Style .box divs with appropriate width
    function restyle(numberofBoxes) {
      //Set width and height css value for '.box' divs
      $('.box').css('width', (100 / numberofBoxes) + '%');
      $('.box').css('height', (100 / numberofBoxes) + '%');
    }

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

    });



    //Hover 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>
0
vijay 11 Дек 2016 в 04:27

Вам необходимо использовать синтаксис делегирования события из {{X0} }

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

пример jsFiddle

1
j08691 11 Дек 2016 в 03:46

Проблема в том, что событие не добавлено в DOM при перерисовке. Положи это

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

Внутри ящиков

     function drawBoxes(){
            var gridWidthInBoxes = prompt("Width of grid in boxes?");
            //Remove boxes and redraw
            $('.box').remove();
            for(var i = 0; i < (gridWidthInBoxes * gridWidthInBoxes) ; i++){
                $(".container").append("<div class='box'></div>");
            }
            //Restyle boxes after they have been drawn
            restyle(gridWidthInBoxes);
//here
        $(".box").mouseenter(function() {
          $(this).addClass('black');
        });
    }
0
Suraj Rao 11 Дек 2016 в 03:19