Javascript 已创建jquery行，但不显示任何内容，on（'；hover'；）方法也不起作用

我正在为一个编程项目创建一个蚀刻草图。默认按钮添加行，但是我的屏幕上没有显示任何内容，但是开发工具会显示正在创建的行。我试过改变页边空白、填充等，但还是一无所获。此外，按钮的第二组事件从未正确触发，它只会将所有行高亮显示为黑色，而不允许我在悬停在它们上方时更改它们。

更新：已解决显示问题（删除html中新行前面的“.”），修复悬停事件是唯一的问题

$(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');
      });
   });
});

---

所以这里有几个问题

类名不能以“.”（）开头。将

class='myClassName'

设置为不带任何点，并仅使用一个“.”执行jQuery查找

CSS中没有边距，因此

方块

将显示为一个宽行。有关潜在的CSS解决方案，请参见下文

在这种情况下，乘以

i

生成维度不会破坏任何东西，但是代码不应该依赖于JS中的奇怪问题，我建议更明确地引用范围中已经定义的

userNum

变量

侦听器事件只能在附加到DOM元素之后才能添加到DOM元素中，而不是之前，因为它是异步的，所以侦听器永远不会触发。您需要在添加

方块之后添加侦听器

悬停

不是真正的事件类型。您可能想使用jQuery的

这里有一些我建议的替代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();
  });
});

---

这里有一个问题。

所以这里有一些问题

类名不能以“.”（）开头。将

class='myClassName'

设置为不带任何点，并仅使用一个“.”执行jQuery查找

CSS中没有边距，因此

方块

将显示为一个宽行。有关潜在的CSS解决方案，请参见下文

在这种情况下，乘以

i

生成维度不会破坏任何东西，但是代码不应该依赖于JS中的奇怪问题，我建议更明确地引用范围中已经定义的

userNum

变量

侦听器事件只能在附加到DOM元素之后才能添加到DOM元素中，而不是之前，因为它是异步的，所以侦听器永远不会触发。您需要在添加

方块之后添加侦听器

悬停

不是真正的事件类型。您可能想使用jQuery的

这里有一些我建议的替代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();
  });
});

---

这里有一个。

尝试检查元素，看看发生了什么——如果您不知道如何使用浏览器的开发工具检查元素——谷歌“如何检查元素”——检查控制台是否有错误——您的一些代码中有双点。你只需要一个哦，你想要的是

.newRow

，而不是

。newRow

哦，还有

class=“newRow”

，但是。。。该死的，我会发布一个答案。试着检查元素看看发生了什么——如果你不知道如何使用浏览器的开发工具检查元素——谷歌“如何检查元素”——检查控制台是否有错误——你的一些代码中有双点。你只需要一个哦，你想要的是

.newRow

，而不是

。newRow

哦，还有

class=“newRow”

，但是。。。该死的，我会发布一个答案的。谢谢，我都没注意到。即使这样，虽然行仍然会被创建，但我看到的是一条线不必担心@DavidLett，当你看代码的时候，有时很难捕捉到清晰可见的细节。我注意到的另一个问题是你的css。你会注意到“酒吧”实际上是两个街区紧挨着。您可以在inspector工具中看到这一点。@DavidLett我刚刚发布了一个工作演示（）。让我知道事情的进展，如果我的答案行得通，请投票/接受先生，你就是那个人！非常感谢你的帮助。有一个问题，为什么用+10而不是*i？谢谢，我都没注意到。即使这样，虽然行仍然会被创建，但我看到的是一条线不必担心@DavidLett，当你看代码的时候，有时很难捕捉到清晰可见的细节。我注意到的另一个问题是你的css。你会注意到“酒吧”实际上是两个街区紧挨着。您可以在inspector工具中看到这一点。@DavidLett我刚刚发布了一个工作演示（）。让我知道事情的进展，如果我的答案行得通，请投票/接受先生，你就是那个人！非常感谢你的帮助。一个问题，为什么用+10代替*i？

.square { margin:0 5px;}