咖啡脚本中的JQuery（JS）无效

Question

我在转换HTML / CSS / JS页面并在Ruby on Rails上使用它时遇到问题。我有以下JS代码：

Java脚本：

＆＃13;

＆＃13;

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height =  getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/'+width+'/'+height+'" alt="pretty kitty">';
}

$('#photos').append(allImages);

＆＃13;

＆＃13;

＆＃13;

并将其转换为Coffee脚本。

咖啡：

＆＃13;

＆＃13;

allImages = ''

getRandomSize = (min, max) ->
  Math.round Math.random() * (max - min) + min

i = 0
while i < 25
  width = getRandomSize(200, 400)
  height = getRandomSize(200, 400)
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">'
  i++
$('#photos').append allImages

＆＃13;

＆＃13;

＆＃13;

但是，当我用HTML调用它时，它不会显示图像。我用控制台日志测试了它，它正在工作。

我在Ruby on Rails上使用它：

HTML：

＆＃13;

＆＃13;

<section id="photos">heyyyyyyyyyyyyy</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

＆＃13;

＆＃13;

＆＃13;

CSS：

＆＃13;

＆＃13;

// Place all the styles related to the mood controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/



#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

body {
  margin: 0;
  padding: 0;
}

＆＃13;

＆＃13;

＆＃13;