JQuery在點擊時不工作

我在jquery中編寫了一些代碼：單擊一個框後，我會看到一些動畫。我用代碼筆運行代碼，並且沒有任何問題。但是當我在本地服務器上嘗試相同的代碼時，我看到我的jquery無法正常工作。這裏是文件。JQuery在點擊時不工作

/* JSTransition.js */ 
 
$('.trigger').on('click', function(){ 
 
    $(this).toggleClass('clicked'); 
 
});

body { 
 
    padding: 50px; 
 
} 
 

 
.trigger { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 20px solid #999; 
 
    background: #ddd; 
 
} 
 

 
.box { 
 
    display: inline-block; 
 
    background: pink; 
 
    width: 200px; 
 
    height: 200px; 
 
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    transition: -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97), -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97); 
 
    pointer-events: none; 
 
} 
 

 
.trigger.clicked .box { 
 
    -webkit-transform: translate(200px, 150px) rotate(20deg); 
 
      transform: translate(200px, 150px) rotate(20deg); 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="JSTransition.js"></script> 
 
<div class="trigger"> 
 
    <div class="box"></div> 
 
</div>

我的CSS工作正常。我還測試了動畫（沒有點擊，只是刷新頁面），它也可以正常工作。當我點擊框時什麼也沒有發生。

來源

2017-02-09 Νίκος Διαμαντόγιαννης

嘗試把js代碼放在文檔準備就緒的功能 – user489872

@aleskv你是對的！問題解決了！但是，爲什麼我可以在沒有文檔準備的情況下在codepen中正常運行它？ –

可能是因爲codepen後來執行js代碼 – user489872

你應該ready功能包事件處理程序：

$(document).ready(function(){ 
    $('.trigger').on('click', function(){ 
     $(this).toggleClass('clicked'); 
    }); 
});

或者嘗試你的腳本代碼替換到結束標記。

來源

2017-02-09 19:14:54 Antonio

謝謝！這是失蹤。 –

JQuery在點擊時不工作

回答

相關問題