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