JQuery code works in console but not in script tag or external js file

Question

I'm trying to create an Etch-A-Sketch using a grid of boxes created from div elements, but the code handling the highlighting of the boxes (mouseenter method) is not working. However, it works when the code is placed in the console, so I am confused as to what is causing the problem.

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

Any help would be much appreciated!

guest271314 · Accepted Answer · 2016-01-13 02:55:07Z

1

.grid-box element not present in DOM when event handler called ? Try using event delegation. See 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>');
    };
});

answered Jan 13, 2016 at 2:55

guest271314

1

Sign up to request clarification or add additional context in comments.

4 Comments

brk Over a year ago

I have demo here jsfiddle.net/vasi_32/fsqfu0e7. Though I have not delegated the event how is this working? any idea?

guest271314 Over a year ago

"trying to create an Etch-A-Sketch using a grid of boxes created from div elements, but the code handling the highlighting of the boxes (mouseenter method) is not working." , "Though I have not delegated the event how is this working? " Same html , js as described at Question ?

Sal P. Over a year ago

@guest271314: can you please rephrase the question?

Sal P. Over a year ago

@user2181397: thanks for the suggestions, but my problem has already been solved.

SimplyInk · Accepted Answer · 2016-01-13 03:18:48Z

Your loop counts wrongly, check my 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;
}

Collectives™ on Stack Overflow

JQuery code works in console but not in script tag or external js file

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related