創建jquery行，但沒有任何顯示，也沒有（'懸停'）方法工作

Question

我正在爲編程項目創建一個蝕刻草圖。默認按鈕添加行，但是我的屏幕上沒有顯示任何內容，但開發工具將行顯示爲正在創建。我試過改變邊距，填充等等。另外，按鈕的第二組事件從不會被正確觸發，它只會將所有行黑色突出顯示，而不是在我將鼠標懸停在它們上方時更改它們。 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'沒有任何點，並執行只有一個'。'的jQuery查找。
2. 您的CSS中沒有邊距，因此squares將顯示爲一個較寬的行。請參閱下面的潛在CSS​​解決方案。
3. 在這種情況下，乘以i生成維度不會破壞任何東西，但代碼不應該依賴於JS中的古怪問題，我建議更明確地引用已在範圍中定義的userNum變量。
4. 監聽器事件只能在DOM元素附加到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。