Javascript 在rails应用程序中翻转div不起作用

您好，我是一名新的javascript/jquery程序员。我有一个带有div的页面，点击后我需要div朝一个方向翻转，但它不会发生。我在rails应用程序中完成了所有这些。请帮忙。正如其他人发布的那样，它在fiddle上工作得非常完美：[我所做的只是将其应用到我的rails应用程序中，但没有结果

这是到目前为止我的代码

在视图中：template.html.erb

    <div class="flip"> 
          <div class="card"> 
              <div class="face front"> 
                  Front
                  <!-- I have an elaborate div here in this block -->
              </div> 
              <div class="face back"> 
                  Back
                    <!-- I have a 1-1 mirror mapping of front div here in this block -->
              </div> 
          </div> 
      </div>
 <hr>   

最后是Javascript： template.js

$('.flip').click(function(){
       alert("hello"); <-- never called. 
       $(this).find('.card').addClass('flipped').mouseleave(function(){
           $(this).removeClass('flipped');
       });
       return false;
   });

$（'.flip'）。单击（函数（）{
警报（“hello”）；尝试将代码包装到
$（文档）中。准备好阻止。如下所示：

$(document).ready(function(){
  $('.flip').click(function(){
       alert("hello"); <-- never called. 
       $(this).find('.card').addClass('flipped').mouseleave(function(){
           $(this).removeClass('flipped');
       });
       return false;
     });
})

$（文档）.ready（函数（）{
$（'.flip'）。单击（函数（）{
alert（“hello”）；你确定页面中包含了正确的css和js文件吗？如果我删除所有javascript代码并保持alert（“hello”）的正确执行，它将正常执行。这就是为什么我如此困惑的原因。好吧，我想出来了。它错了$（document）。ready（function（）{}不公平，我的答案应该被接受：PThanks Phil！我接受这个答案。如果你能告诉我这个文档就绪的东西在rails应用程序中为我做了什么，那就有额外的分数了。仅仅因为你希望这个js在页面加载后执行。如果你没有将文档就绪，它将在页面加载之前执行，并且找不到$（“.flip”）元素
$(document).ready(function(){
  $('.flip').click(function(){
       alert("hello"); <-- never called. 
       $(this).find('.card').addClass('flipped').mouseleave(function(){
           $(this).removeClass('flipped');
       });
       return false;
     });
})