2016-12-11 16 views
0

ボタンクリック後に再描画できるjqueryグリッドがあります。これはThe Odin ProjectのためのEtch-a-Sketchプロジェクトのためのものです。再描画後にjQuery .mousenterが機能しない

コードは初めて動作し、グリッドのサイズを選択してから.mouseenterを描画することができます。ただし、ボタンをクリックしてリセットすると、描画ができなくなります。私が間違っていることを確認していない。

私はhttps://jsfiddle.net/davidtaylorjr/cLcbxmnb/14/

HTMLでのプロジェクトのためにjsfiddleを持っている:

<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

mouseenterイベントは、ボックスを再描画すると決してトリガーされません。

あなたは

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

が参照イベントを委任する.containerを使用します:.on(events [, selector ] [, data ], handler)

+0

、ありがとう! – davidtaylorjr

0

問題は、イベントがないからですに追加 再描画時のDOM 入れてこの

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

は、内部のあなたがevent delegation syntaxの使用する必要が

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

drawboxes .on()

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

jsFiddle example

0

が、それはあなたを助ける、これを試してみてください。

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

関連する問題