jQuery .mousenter重繪後不工作

Question

我有一個jQuery網格，可以在點擊按鈕後重新繪製。這是Odin項目的一個Etch-a-Sketch項目。

該代碼第一次工作，並讓用戶選擇網格的大小，然後繪製.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'); 
    }); 

})(); 

Answer 1

當您重新繪製框時，將不會觸發10事件。

您將使用.container委派事件

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

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

Answer 2

的問題是事情是不添加到 重繪的DOM。 將這個

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

內drawboxes

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

Answer 3

您需要使用event delegation syntax的.on()

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

jsFiddle example

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>