jQuery mouseenterは最初のページの読み込み時にのみ動作します

Question

このコードは、マウスの中心で色が変わる色付きのセルのグリッドを表示し、新しい色のセルの軌跡を残しています。ボタンはグリッドを元の色のセルで再ロードします。問題は、マウスの色の変更は、最初のグリッドの読み込み（ページリフレッシュ時）後にのみ動作し、新しいグリッドの作成ボタンがクリックされた後の後続のロードでは機能しません。

私はjavascriptとjQueryの新機能ですが、私はクラスの資料を読んでいて、これのさまざまな部分を行う方法についていくつかの記事を読んでいますが、何が間違っているのかわかりません。

ログイン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

移動し、それが外$(document).ready機能とマウスは、私はこのコード
に気づく

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

Answer 2

あなたは一度だけ$(document).ready上mouseenterイベントリスナーを追加します。 fillGrid()が呼び出されると、mouseenterイベントにバインドされていない'.cell'要素の新しいセットがDOMに追加されます。

同じことを再度実行するように指示する必要があります。

次が切り取ら参照してください：

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

2つの問題としての機能を入力して追加1）cellsPer ** 2はvaではありません蓋。 Math.powまたはcellsPer * cellsPer
2）マウス入力リスナーのみをdocument.readyに設定しています。あなたのグリッドにemptyを呼び出すと、すべての子要素に関連付けられたイベントリスナーとすべてが削除されます。つまり、グリッドを再初期化するたびにイベントリスナーを再追加する必要があります。ここで

はあなたのコードの作業を取得するために、最小限の変更で更新抜粋です：あなたは、私がコードをリファクタリングするつもりはないクラスのためにこれをやっているので

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>

が、もう1つの提案は、イベントリスナーをfillGrid関数に追加することです。そうすることで、グリッドと関連があるすべてを1つの場所にきれいにカプセル化できます。