JQuery代碼在控制檯中工作，但不在腳本標記或外部js文件中

Question

我正嘗試使用從div元素創建的框的網格來創建Etch-A-Sketch，但處理框的突出顯示的代碼（mouseenter方法）不起作用。但是，它在代碼放置在控制檯中時有效，所以我對導致問題的原因感到困惑。

<script> 
    $('button').click(function() { 

     $('#container').empty();              
     var row = prompt("How many rows are desired?"); 
     var col = prompt("How many columns are desired?"); 

     for (var j=0; j<=row; j++) {            
      for (var i=0; i<=col; i++) { 
       $('#container').append('<div class="grid-box"></div>'); 
      }; 
      $('#container').append('<div class="next-row"></div>'); 
     }; 
     $('.grid-box').mouseenter(function() { 
      $(this).css('background-color', "red"); 
     }); 
    }); 
</script> 

任何幫助將不勝感激！

Answer 1

.grid-box元素不存在於DOM當事件處理程序調用？嘗試使用事件委派。見Understanding Event Delegation

// delegate `mouseenter` event to `.grid-box` parent element `#container` 
$("#container").on("mouseenter", ".grid-box", function() { 
    $(this).css('background-color', "red"); 
}); 

$('button').click(function() { 

    $('#container').empty();              
    var row = prompt("How many rows are desired?"); 
    var col = prompt("How many columns are desired?"); 

    for (var j=0; j<=row; j++) {            
     for (var i=0; i<=col; i++) { 
      $('#container').append('<div class="grid-box"></div>'); 
     }; 
     $('#container').append('<div class="next-row"></div>'); 
    }; 
}); 

Answer 2

你的循環計數錯誤，檢查我fiddle

HTML

<button>Start</button> 
<div id="container"></div> 

JS

$('button').click(function() { 
    $('#container').empty();              
    var row = prompt("How many rows are desired?"); 
    var col = prompt("How many columns are desired?"); 

    for (var j=0; j<col; j++) {            
     for (var i=0; i<row; i++) { 
      $('#container').append('<div class="grid-box">&nbsp;o</div>'); 
     }; 
     $('#container').append('<div class="next-row"></div>'); 
    }; 
    $('.grid-box').mouseenter(function() { 
     $(this).css('background-color', "red"); 
    }); 
}); 

CSS

.grid-box { 
    float: left; 
    width: 25px; 
    height: 25px; 
} 
.next-row{ 
    clear: both; 
}