javascript - 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 中？尝试使用事件委托(delegate)。请参阅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>');
    };
});