jqueryの行を作成しましたが、何も表示されず、on（ 'hover'）メソッドが機能しません。

Question

プログラミングプロジェクト用のエッチスケッチを作成しています。デフォルトのボタンは行を追加しますが、画面上に何も表示されませんが、開発ツールは行を作成済みとして表示します。私はマージン、パディングなどを変更しようとしましたが、まだ何もありません。また、ボタンの2番目のイベントセットは決して適切にトリガーされません。すべての行を黒で強調表示します。 https://lettda.github.io/EtchAsketch/

UPDATE：ディスプレイが解決された（HTML除去におけるnewRowの前に ''）、ホバーイベントを固定するだけの問題である

$(document).ready(function() { 

     var i; 

    function gridCreate(){ 
     $('.grid').empty(); 

     var userNum = prompt("How big do you want your grid?"); 

     for (var i = 0; i < userNum; i++) { 
      $('.grid').append("<div class = 'newRow'></div>"); 
     } 
     for (var i = 0; i < userNum; i++) { 
      $('.newRow').append("<div class='square'></div>"); 
     } 

     var newWidth = $('.square').width() * i; 
     $('.newRow').width(newWidth); 
     $('.grid').width($('.newRow').width()); 

     var newHeight = $('.square').height() * i; 
     // $('.newRow').height(newHeight); 
     $('.grid').height($('.newRow').height()); 
    }; 


    $('.normal').on("click", function(){ 
      gridCreate(); 
     // $('.square').unbind(); 
    $('.square').on("hover", function(){ 
     $(this).css('background-color', 'red'); 
     }); 
    }); 
}); 

CSS：

.grid { 
    margin: 50px auto 0 auto; 
    border: 1px solid black; 
} 
.newRow { 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
} 

.square { 
    height: 1.5rem; 
    width: 1.5rem; 
    background-color: black; 
    display: inline-block; 
    margin: 0px; 
} 
.navbar-brand { 
    text-align: center; 
    float: none !important; 
} 
.navButtons { 
    margin: 0 auto; 
    text-align: center; 
} 

Answer 1

ここにいくつかの問題があります。

1. ClassNamesは「。」で始まることはできません。 （See W3 CSS Grammar Rules）。 class='myClassName'をドットなしで設定し、 '。'が1つのみのjQueryルックアップを実行します。
2. CSSに余白がないため、squaresは1つのワイド行として表示されます。潜在的なCSSソリューションについては以下を参照してください。
3. この場合、次元を生成するためにiを乗算しても何も破損することはありませんが、コードはJSの風変わりな問題に依存しないようにしてください。
4. リスナーイベントは、以前にDOMに追加された後にのみDOMエレメントに追加することができます。そのため、リスナーは決してトリガーしません。 squaresを追加した後にリスナーを追加する必要があります。
5. hoverは実際のイベントタイプではありません。 jQueryを使用したい場合は.hover()

ここにいくつかの代替JSがあります。

$(document).ready(function() { 
    function gridCreate(){ 
    $('.grid').empty(); 

    var userNum = prompt("How big do you want your gid?"); 

    for (var i = 0; i < userNum; i++) { 
     $('.grid').append("<div class ='newRow'></div>"); 
    } 
    for (var i = 0; i < userNum; i++) { 
     $('.newRow').append("<div class='square'></div>"); 
    } 

    var newWidth = ($('.square').width()+10) * userNum; 
    $('.newRow').width(newWidth); 
    $('.grid').width($('.newRow').width()); 

    var newHeight = $('.square').height() * userNum; 
    $('.grid').height($('.newRow').height()); 

    $('.square').hover(function(){ 
     $(this).css('background-color', 'red'); 
    }); 
    }; 
    $('.normal').on("click", function(){ 
     gridCreate(); 
    }); 
}); 

square間隔の問題を解決するには、あなたはまた、彼らは一つの長い黒のバーのように見ていないので、それらにいくつかのマージンを追加する必要があると思います。

.square { margin:0 5px;} 

ここにはworking JSFiddle demoがあります。