ホーム

jqueryを外部ファイルにすると動かなかった

 

環境

  • jQuery
  • Javascript
  • html
  • html5

説明

htmlファイルとjsファイルを別々にして、jQueryを実行しようとしたらハマりました。jsファイルの一番初めに$(document).ready(function(){などをやらないと、読み込めないようですね。

index.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="index.js" type="text/javascript"></script>
  </head> 
 <body>
  
     <button id="button">ボタン</button>
  </body> 
</html>

index.js

$('#button').on('click', function() {
  alert("クリックされました");
});

修正したindex.js

$(document).ready(function(){



$('#button').on('click', function() {
  alert("クリックされました");
});
});
Pocket
LinkedIn にシェア

-ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.