jQuery Mouseenter funktioniert nur auf der ersten Seite load

Question

Dieser Code präsentiert ein Raster aus farbigen Zellen, die am mouseenter die Farbe ändern und eine Spur von Zellen der neuen Farbe hinterlassen. Ein Knopf lädt das Gitter mit Zellen der ursprünglichen Farbe neu. Problem ist, dass die mouseenter-Farbänderung erst nach dem ersten Laden des Rasters (bei Seitenaktualisierung) funktioniert, aber nicht bei nachfolgenden Ladevorgängen, nachdem auf die Schaltfläche "Neues Raster erstellen" geklickt wurde.

Ich bin neu in Javascript und jQuery und obwohl ich über die Unterrichtsmaterialien gewesen bin und einige Artikel darüber gelesen habe, wie man verschiedene Teile davon macht, kann ich nicht sehen, was falsch ist.

Besuchen Sie die jsfiddle here.

var gridWidth = 600; 
var fillGrid = function(){ 
    $('.grid').empty(); 
    var cellsPer = prompt('How many cells would you like in a side?'); 
    console.log('cellsPer = ' + cellsPer); 
    var cellWidth = (gridWidth/cellsPer) - 1; 
    console.log('cellSize = ' + cellWidth); 

    var cell = "<div class='cell'></div>"; 
    for (var i = 0; i < cellsPer**2; i++) { 
    $('.grid').append(cell); 
    }; 
    $('.cell').css({ 
    'background':'blue','height': cellWidth+'px', 'width': cellWidth+'px', 
    'float':'left','margin': '0 1px 1px 0' 
    }); 
}; 

$(document).ready(function() { 
    fillGrid(); 

    $('.grid').css({'width': gridWidth+'px'}); 

    $('button').click(function(){ 
     fillGrid(); 
    }); 

    $('.cell').mouseenter(function() { 
    $(this).css('background','pink'); 
    }); 
}); 

Answer 1

Move it außerhalb $(document).ready Funktion und fügen Sie die Mausfunktionalität als

' $(document).on('mouseenter','.cell',function() { 
    $(this).css('background','pink'); 
    });' 

Answer 2

Sie wo Hinzufügen der mouseenter Ereignis-Listener nur einmal auf $(document).ready. Wenn fillGrid() aufgerufen wird, wird eine neue Gruppe von '.cell' Elementen, die nicht an das Ereignis mouseenter gebunden sind, zu DOM hinzugefügt.

Sie müssen ihnen sagen, dass sie sich wieder gleich verhalten sollen.

Siehe snipped folgende:

var gridWidth = 600; 
 
var fillGrid = function(){ 
 
\t $('.grid').empty(); 
 
    var cellsPer = prompt('How many cells would you like in a side?'); 
 
    console.log('cellsPer = ' + cellsPer); 
 
    var cellWidth = (gridWidth/cellsPer) - 1; 
 
\t console.log('cellSize = ' + cellWidth); 
 

 
    var cell = "<div class='cell'></div>"; 
 
    for (var i = 0; i < cellsPer**2; i++) { 
 
    $('.grid').append(cell); 
 
    }; 
 
    $('.cell').css({ 
 
    \t 'background':'blue','height': cellWidth+'px', 'width': cellWidth+'px', 
 
    'float':'left','margin': '0 1px 1px 0' 
 
    }); 
 
    
 
    $('.cell').mouseenter(function() { 
 
    \t $(this).css('background','pink'); 
 
    }); 
 
}; 
 

 
$(document).ready(function() { 
 
\t fillGrid(); 
 

 
\t $('.grid').css({'width': gridWidth+'px'}); 
 

 
    $('button').click(function(){ 
 
\t \t fillGrid(); 
 
\t }); 
 
});

button{ 
 
    display:block; 
 
    margin:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Create New Grid</button> 
 
    <div class="grid"></div>

Answer 3

Zwei Fragen, die ich mit diesem Code feststellen, geben Sie
1) cellsPer ** 2 ist nicht va Deckel. Verwenden Sie Math.pow oder cellsPer * cellsPer
2) Sie einrichten nur die Maus Enter Listener auf document.ready. Wenn Sie in Ihrem Grid empty aufrufen, werden alle untergeordneten Elemente - angefügte Ereignislistener und alle - entfernt. Dies bedeutet, dass Sie die Ereignislistener bei jeder Neuinitialisierung des Rasters erneut hinzufügen müssen. Hier

ist eine aktualisierte Snippet mit minimalen Änderungen des Code zum Laufen zu bringen:

var gridWidth = 600; 
 
var fillGrid = function(){ 
 
    $('.grid').empty(); 
 
    var cellsPer = prompt('How many cells would you like in a side?'); 
 
    console.log('cellsPer = ' + cellsPer); 
 
    var cellWidth = (gridWidth/cellsPer) - 1; 
 
    console.log('cellSize = ' + cellWidth); 
 

 
    var cell = "<div class='cell'></div>"; 
 
    for (var i = 0; i < cellsPer * cellsPer; i++) { 
 
    $('.grid').append(cell); 
 
    }; 
 
    $('.cell').css({ 
 
    \t 'background':'blue','height': cellWidth+'px', 'width': cellWidth+'px', 
 
    'float':'left','margin': '0 1px 1px 0' 
 
    }); 
 
}; 
 

 
$(document).ready(function() { 
 
    fillGrid(); 
 

 
    $('.grid').css({'width': gridWidth+'px'}); 
 

 
    $('button').click(function(){ 
 
    fillGrid(); 
 
    $('.cell').mouseenter(function() { 
 
     $(this).css('background','pink'); 
 
    }); 
 
    }); 
 
    
 
    $('.cell').mouseenter(function() { 
 
    $(this).css('background','pink'); 
 
    }); 
 
});

button{ 
 
    display:block; 
 
    margin:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Create New Grid</button> 
 
<div class="grid"></div>

Da Sie dies für eine Klasse tun Ich bin nicht den Code gehen Refactoring aber Ein anderer Vorschlag, den ich machen würde, ist das Hinzufügen des Ereignis-Listeners in der fillGrid-Funktion, so dass Sie alles, was mit dem Grid zu tun hat, an einer Stelle sauber kapseln.