翻转一个div，只是不能在rails应用内工作

Question

你好，我是一个新手的javascript/jquery程序员。我有一个网页与一个div和点击我需要该div翻转在一个方向，而它没有发生。我在一个Rails应用程序中完成了所有这些工作。请帮忙。它可以在其他人发布的小提琴上完美地工作：[http://jsfiddle.net/nicooprat/GDdtS/][1]我所做的就是将其适用于我的导轨应用程序，但没有任何结果。

这是迄今为止

在视图中我的代码：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> 

这里的视图的相关CSS。事实上，所有这些工作都是在小提琴上进行的。只是不在我的Rails应用程序。

template.css.scss

.flip { 
    -webkit-perspective: 800; 
    width: 400px; 
    height: 200px; 
    position: relative; 
    margin: 50px auto; 
} 
.flip .card.flipped { 
    -webkit-transform: rotatex(-180deg); 
} 
.flip .card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 0.5s; 
} 
.flip .card .face { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-backface-visibility: hidden ; 
    z-index: 2; 
    font-family: Georgia; 
    font-size: 3em; 
    text-align: center; 
    line-height: 200px; 
} 
.flip .card .front { 
    position: absolute; 
    z-index: 1; 
    background: black; 
    color: white; 
    cursor: pointer; 
} 
.flip .card .back { 
    -webkit-transform: rotatex(-180deg); 
    background: blue; 
    background: white; 
    color: black; 
    cursor: pointer; 
} 

终于在这里是JavaScript： template.js

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

Answer 1

尝试来包装你的代码$(document).ready块。像这样：

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