Question

我有一个jquery网格，可以在单击按钮后重绘。这是针对The Odin Project的Etch-a-Sketch项目。

代码第一次工作，让用户选择网格的大小，然后在.mouseenter上绘制。但是，当他们单击按钮进行重置时，不再允许绘图。不确定我做错了什么。

我在https://jsfiddle.net/davidtaylorjr/cLcbxmnb/14/

的项目中有一个jsfiddle

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

})();

Answer 1

您需要使用.on()

的event delegation syntax

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

<强> jsFiddle example

Answer 2

问题是重绘时没有将事件添加到DOM中。把这个

<script>
var some_json = {{some_dict|tojson|safe}}
console.log(some_json)
</script>

内部绘图箱

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

Answer 3

重绘框时，永远不会触发

mouseenter事件。

您将使用.container委派活动

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

参考：.on( events [, selector ] [, data ], handler )

Answer 4

试试这个，它会对你有帮助。

  $(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>

jQuery .mousenter在重绘后不起作用

4 个答案: